fix: width on mobile

ImLunaHey · ImLunaHey · commit d2fba77e21fd · 2024-12-28T18:26:27.000+10:30
diff --git a/index.html b/index.html
@@ -3,7 +3,6 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>BSky Client</title>
   <script defer data-domain="bsky-client.imlunahey.com" src="https://plausible.io/js/script.outbound-links.js"></script>
diff --git a/src/components/FeedSelector.tsx b/src/components/FeedSelector.tsx
@@ -44,7 +44,7 @@ export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) =>
   }
 
   return (
-    <div className="flex flex-col gap-2 rounded-lg w-[550px]">
+    <div className="flex flex-col gap-2 rounded-lg sm:w-[550px]">
       <Ariakit.TabProvider
         defaultSelectedId={selectedFeed}
         setSelectedId={(selectedId) => {
@@ -59,32 +59,35 @@ export const FeedSelector = ({ columnNumber = 1 }: { columnNumber: number }) =>
           });
         }}
       >
-        {/* // if there are less than 2 feeds, don't show the selector */}
+        {/* if there are less than 2 feeds, don't show the selector */}
         {feeds.length >= 2 && (
-          <div>
-            <Ariakit.TabList
-              className="flex flex-row gap-4 max-w-full overflow-x-scroll bg-neutral-900 p-2 m-2 mb-0 rounded-md"
-              aria-label="feeds"
-            >
-              {data?.map((feed) => (
-                <Ariakit.Tab
-                  id={feed.uri}
-                  className={cn(
-                    'flex h-10 items-center justify-center whitespace-nowrap bg-neutral-800 px-4',
-                    selectedFeed === feed.uri && 'bg-neutral-700',
-                  )}
-                >
-                  {feed.displayName}
-                </Ariakit.Tab>
-              ))}
-            </Ariakit.TabList>
-          </div>
+          <>
+            <div>
+              <Ariakit.TabList
+                className="flex flex-row gap-4 max-w-full overflow-x-scroll bg-neutral-900 p-2 m-2 mb-0 rounded-md"
+                aria-label="feeds"
+              >
+                {data?.map((feed) => (
+                  <Ariakit.Tab
+                    id={feed.uri}
+                    className={cn(
+                      'flex h-10 items-center justify-center whitespace-nowrap bg-neutral-800 px-4',
+                      selectedFeed === feed.uri && 'bg-neutral-700',
+                    )}
+                  >
+                    {feed.displayName}
+                  </Ariakit.Tab>
+                ))}
+              </Ariakit.TabList>
+            </div>
+            {data?.map((feed) => (
+              <Ariakit.TabPanel tabId={feed.uri} className="flex-1 overflow-y-scroll min-h-0">
+                <Timeline columnNumber={columnNumber} />
+              </Ariakit.TabPanel>
+            ))}
+          </>
         )}
-        {data?.map((feed) => (
-          <Ariakit.TabPanel tabId={feed.uri} className="flex-1 overflow-y-scroll min-h-0">
-            <Timeline columnNumber={columnNumber} />
-          </Ariakit.TabPanel>
-        ))}
+        {feeds.length === 1 && <Timeline columnNumber={columnNumber} />}
       </Ariakit.TabProvider>
     </div>
   );
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -64,7 +64,7 @@ export function PostCard({ post, context, className, onClick }: PostCardProps) {
 
   return (
     <div
-      className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow w-[550px]', className)}
+      className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow w-full', className)}
       onClick={onClick}
       id={post.uri}
     >
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -101,7 +101,7 @@ export function Timeline({ columnNumber = 1 }: { columnNumber: number }) {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="min-w-[550px]">
+      <div className="w-screen sm:w-full">
         <Virtuoso
           useWindowScroll
           totalCount={posts.length}
diff --git a/src/components/ui/FormattedNumber.tsx b/src/components/ui/FormattedNumber.tsx
@@ -5,7 +5,7 @@ export const FormattedNumber = ({ value, unit }: { value: number | undefined | n
   const compactValue = new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value);
 
   return (
-    <span title={`${formattedValue} ${unit}`}>
+    <span title={`${formattedValue} ${unit}`} className="whitespace-nowrap">
       {compactValue} {unit}
     </span>
   );

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export function PostCard({ post, context, className, onClick }: PostCardProps) {`
`64`	`64`
`65`	`65`	`return (`
`66`	`66`	`<div`
`67`		`- className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow w-[550px]', className)}`
	`67`	`+ className={cn('bg-white dark:bg-neutral-900 p-4 rounded-lg shadow w-full', className)}`
`68`	`68`	`onClick={onClick}`
`69`	`69`	`id={post.uri}`
`70`	`70`	`>`