fix: keep narrow share controls and dark tooltips readable

Author: pavzagor

.github/assets/share-navigation-theme/timeline-fixture-after.png

@@ -0,0 +1,47 @@
+{
+	"method": "CUA Chrome Guest, file fixture; exact outer header class from current source, real Tailwind config + local font; placeholders for owner/avatar/content. Not full app validation.",
+	"before": {
+		"320": {
+			"avatarRight": 125,
+			"helpX": 99.890625,
+			"overlapPx": 25.109375,
+			"titleWidth": 0
+		},
+		"393": {
+			"avatarRight": 125,
+			"helpX": 172.890625,
+			"overlapPx": 0,
+			"titleWidth": 23.890625
+		}
+	},
+	"after": {
+		"320": {
+			"headerHeight": 99,
+			"titleWidth": 133.71875,
+			"avatarY": [15, 47],
+			"controlsY": [61, 91],
+			"overlap": false
+		},
+		"393": {
+			"headerHeight": 99,
+			"titleWidth": 133.71875,
+			"avatarY": [15, 47],
+			"controlsY": [61, 91],
+			"overlap": false
+		},
+		"640": {
+			"headerHeight": 56,
+			"titleWidth": 133.71875,
+			"avatarRight": 173.828125,
+			"controlsX": 419.890625,
+			"overlap": false
+		},
+		"1280": {
+			"headerHeight": 56,
+			"titleWidth": 133.71875,
+			"avatarRight": 221.828125,
+			"controlsX": 899.796875,
+			"overlap": false
+		}
+	}
+}

.github/assets/share-navigation-theme/timeline-fixture-before.png

@@ -802,7 +802,7 @@ export const Share = ({
 									// border), so the two read as one contained, rounded unit,
 									// centred at the same width. Classic view's toggle lives under
 									// the player instead.
-									<div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-3 rounded-t-xl border border-b-0 border-gray-5 bg-gray-1 px-5">
+									<div className="mx-auto flex w-full max-w-6xl flex-col items-stretch gap-2 rounded-t-xl border border-b-0 border-gray-5 bg-gray-1 px-3 py-2 sm:h-14 sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-5 sm:py-0">
 										<div className="flex min-w-0 items-center gap-3">
 											<ShareNavigation />
 											<SignedImageUrl

.github/assets/share-navigation-theme/timeline-fixture-measurements.json

@@ -3759,15 +3759,15 @@ function MediaPlayerTooltip(props: MediaPlayerTooltipProps) {
 			<TooltipContent
 				container={context.portalContainer}
 				sideOffset={tooltipSideOffset}
-				className="flex items-center gap-2 border bg-white px-2 py-1 font-medium text-black data-[side=top]:mb-3.5  [&>span]:hidden"
+				className="flex items-center gap-2 border border-gray-6 bg-gray-1 px-2 py-1 font-medium text-gray-12 data-[side=top]:mb-3.5  [&>span]:hidden"
 			>
 				<p>{tooltip}</p>
 				{Array.isArray(shortcut) ? (
 					<div className="flex gap-1 items-center">
 						{shortcut.map((shortcutKey) => (
 							<kbd
 								key={shortcutKey}
-								className="select-none rounded border bg-white px-1.5 py-0.5 font-mono text-[11.2px] text-black shadow-xs"
+								className="select-none rounded border border-gray-6 bg-gray-3 px-1.5 py-0.5 font-mono text-[11.2px] text-gray-12 shadow-xs"
 							>
 								<abbr title={shortcutKey} className="no-underline">
 									{shortcutKey}
@@ -3779,7 +3779,7 @@ function MediaPlayerTooltip(props: MediaPlayerTooltipProps) {
 					shortcut && (
 						<kbd
 							key={shortcut}
-							className="select-none rounded border bg-white px-1.5 py-px font-mono text-[11.2px] text-foreground shadow-xs"
+							className="select-none rounded border border-gray-6 bg-gray-3 px-1.5 py-px font-mono text-[11.2px] text-gray-12 shadow-xs"
 						>
 							<abbr title={shortcut} className="no-underline">
 								{shortcut}