tablet styling changes

likeandscribe · Nov 15, 2024 · ebda0ea · ebda0ea
1 parent 8b9101e
commit ebda0ea
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 43 deletions.
diff --git a/packages/atproto-browser/app/at/[identifier]/[collection]/[rkey]/page.tsx b/packages/atproto-browser/app/at/[identifier]/[collection]/[rkey]/page.tsx
@@ -42,7 +42,7 @@ export default async function RkeyPage({
   if (!response.ok) {
     return (
       <div>
-        🚨 Failed to fetch record: {response.statusText}. URL:{" "}
+        🚨 Failed to fetch record: {response.statusText}. URL:
         {getRecordUrl.toString()}
       </div>
     );

diff --git a/packages/atproto-browser/app/at/[identifier]/[collection]/page.tsx b/packages/atproto-browser/app/at/[identifier]/[collection]/page.tsx
@@ -30,7 +30,7 @@ export default async function CollectionPage({
         href={`at://${identityResult.didDocument.id}/${params.collection}`}
       />
       <h1>
-        {params.collection} records{" "}
+        {params.collection} records
         <Link
           href={`/collection-rss?u=at://${params.identifier}/${params.collection}`}
           title="RSS feed"

diff --git a/packages/atproto-browser/app/at/[identifier]/page.tsx b/packages/atproto-browser/app/at/[identifier]/page.tsx
@@ -84,7 +84,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
           return (
             // eslint-disable-next-line react/no-array-index-key
             <li key={index}>
-              Change created at {utcDateFormatter.format(previous.createdAt)}{" "}
+              Change created at {utcDateFormatter.format(previous.createdAt)}
               (UTC) of type &quot;{previousOperation.type}&quot;.
             </li>
           );
@@ -174,11 +174,11 @@ async function DidHistory({ identifier }: { identifier: string }) {
               {alsoKnownAsAdded.length === 1 &&
               alsoKnownAsRemoved.length === 1 ? (
                 <li>
-                  Alias changed from{" "}
+                  Alias changed from
                   <Link href={getAtUriPath(new AtUri(alsoKnownAsRemoved[0]!))}>
                     {alsoKnownAsRemoved[0]}
-                  </Link>{" "}
-                  to{" "}
+                  </Link>
+                  to
                   <Link href={getAtUriPath(new AtUri(alsoKnownAsAdded[0]!))}>
                     {alsoKnownAsAdded[0]}
                   </Link>
@@ -187,7 +187,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
                 <>
                   {alsoKnownAsAdded.length > 0 && (
                     <li>
-                      Alias added:{" "}
+                      Alias added:
                       {alsoKnownAsAdded.flatMap((aka) => [
                         <Link key={aka} href={getAtUriPath(new AtUri(aka))}>
                           {aka}
@@ -198,7 +198,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
                   )}
                   {alsoKnownAsRemoved.length > 0 && (
                     <li>
-                      Alias removed:{" "}
+                      Alias removed:
                       {alsoKnownAsRemoved.flatMap((aka) => [
                         <Link key={aka} href={getAtUriPath(new AtUri(aka))}>
                           {aka}
@@ -222,19 +222,19 @@ async function DidHistory({ identifier }: { identifier: string }) {
                     )}
                     {!!service.endpoint && (
                       <li key={service.id}>
-                        Service &quot;{service.id}&quot; changed endpoint from{" "}
+                        Service &quot;{service.id}&quot; changed endpoint from
                         <a href={service.endpoint.from}>
                           {service.endpoint.from}
-                        </a>{" "}
-                        to{" "}
+                        </a>
+                        to
                         <a href={service.endpoint.to}>{service.endpoint.to}</a>
                       </li>
                     )}
                   </Fragment>
                 ))}
               {servicesAdded.length > 0 && (
                 <li>
-                  Services added:{" "}
+                  Services added:
                   {servicesAdded.flatMap(([id, service]) => [
                     <Link key={id} href={service.endpoint}>
                       {id} ({service.type})
@@ -245,7 +245,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {servicesRemoved.length > 0 && (
                 <li>
-                  Services removed:{" "}
+                  Services removed:
                   {servicesRemoved.flatMap(([id, service]) => [
                     <Link key={id} href={service.endpoint}>
                       {id} ({service.type})
@@ -256,7 +256,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {rotationKeysAdded.length > 0 && (
                 <li>
-                  Rotation keys added:{" "}
+                  Rotation keys added:
                   {rotationKeysAdded.flatMap((key) => [
                     <code key={key}>{key}</code>,
                     ", ",
@@ -265,7 +265,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {rotationKeysRemoved.length > 0 && (
                 <li>
-                  Rotation keys removed:{" "}
+                  Rotation keys removed:
                   {rotationKeysRemoved.flatMap((key) => [
                     <code key={key}>{key}</code>,
                     ", ",
@@ -275,13 +275,13 @@ async function DidHistory({ identifier }: { identifier: string }) {
               {verificationMethodsChanged.length > 0 &&
                 verificationMethodsChanged.map((method) => (
                   <li key={method.id}>
-                    Verification method &quot;{method.id}&quot; changed from{" "}
+                    Verification method &quot;{method.id}&quot; changed from
                     <code>{method.from}</code> to <code>{method.to}</code>
                   </li>
                 ))}
               {verificationMethodsAdded.length > 0 && (
                 <li>
-                  Verification methods added:{" "}
+                  Verification methods added:
                   {verificationMethodsAdded.flatMap(([id, key]) => [
                     <Fragment key={id}>
                       <code>{key}</code> (&quot;{id}&quot;)
@@ -292,7 +292,7 @@ async function DidHistory({ identifier }: { identifier: string }) {
               )}
               {verificationMethodsRemoved.length > 0 && (
                 <li>
-                  Verification methods removed:{" "}
+                  Verification methods removed:
                   {verificationMethodsRemoved.flatMap(([id, key]) => [
                     <Fragment key={id}>
                       <code>{key}</code> (&quot;{id}&quot;)

diff --git a/packages/atproto-browser/app/at/_lib/did-components.tsx b/packages/atproto-browser/app/at/_lib/did-components.tsx
@@ -54,7 +54,7 @@ export async function DidHandle({ did }: { did: string }) {
         </Link>
       ) : (
         "⚠️ Invalid Handle"
-      )}{" "}
+      )}
       (<Link href={`/at/${didDocument.id}`}>{didDocument.id}</Link>)
     </>
   );

diff --git a/packages/atproto-browser/app/page.tsx b/packages/atproto-browser/app/page.tsx
@@ -21,11 +21,11 @@ export default function Home() {
 
       <footer>
         <p>
-          Developed by{" "}
+          Developed by
           <Link href="/at/did:plc:2xau7wbgdq4phuou2ypwuen7/app.bsky.actor.profile/self">
             @tom.frontpage.team
           </Link>
-          .{" "}
+          .
           <a href="https://github.com/likeandscribe/frontpage/tree/main/packages/atproto-browser">
             Source code
           </a>

diff --git a/packages/frontpage/app/(app)/layout.tsx b/packages/frontpage/app/(app)/layout.tsx
@@ -31,30 +31,32 @@ export default async function Layout({
 }) {
   const session = await getSession();
   return (
-    <div className="relative container mx-auto px-0 md:px-6 pb-8 md:py-12 max-w-3xl">
-      <div className="fixed left-0 right-0 bg-background flex items-center justify-between py-1.5 px-4 shadow z-50">
-        <Link href="/">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src="/frontpage-logo.svg" alt="Frontpage" className="h-12" />
-        </Link>
+    <div className="relative container mx-auto px-0 md:px-6 pb-8 max-w-3xl">
+      <div className="fixed top-0 left-0 right-0 bg-background py-1.5 px-4 shadow z-50">
+        <div className="flex items-center justify-between md:max-w-3xl mx-auto md:px-6">
+          <Link href="/">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src="/frontpage-logo.svg" alt="Frontpage" className="h-12" />
+          </Link>
 
-        <div className="flex items-center gap-4">
-          {session ? (
-            <Button asChild>
-              <Link href="/post/new">New</Link>
-            </Button>
-          ) : null}
-          <Suspense>
-            <LoginOrLogout />
-          </Suspense>
+          <div className="flex items-center gap-4">
+            {session ? (
+              <Button asChild>
+                <Link href="/post/new">New</Link>
+              </Button>
+            ) : null}
+            <Suspense>
+              <LoginOrLogout />
+            </Suspense>
+          </div>
         </div>
       </div>
 
       <main className="mb-6">{children}</main>
 
       <footer className="px-4 flex justify-between items-center text-gray-500 dark:text-gray-400">
         <p>
-          Made by{" "}
+          Made by
           <a
             href={`https://bsky.app/profile/${FRONTPAGE_ATPROTO_HANDLE}`}
             className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"

diff --git a/packages/frontpage/app/(app)/page.tsx b/packages/frontpage/app/(app)/page.tsx
@@ -25,7 +25,7 @@ async function getMorePostsAction(cursor: number | null) {
 
   return {
     content: (
-      <div className="pt-16 divide-y divide-accent">
+      <div className="pt-16 divide-y divide-accent md:pt-20">
         {posts.map((post) => (
           <PostCard
             key={post.id}

diff --git a/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image/route.tsx b/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image/route.tsx
@@ -93,7 +93,7 @@ export async function GET(
         <OgBox style={{ alignItems: "center", gap: 12 }}>
           <OgCommentIcon />
           <OgBox>
-            {comment.children!.length}{" "}
+            {comment.children!.length}
             {comment.children!.length === 1 ? "reply" : "replies"}
           </OgBox>
         </OgBox>

diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/layout.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/layout.tsx
@@ -29,7 +29,7 @@ export default async function Post(props: {
   }
 
   return (
-    <div className="mx-auto max-w-4xl pt-16 divide-y-2 divide-accent">
+    <div className="mx-auto max-w-4xl pt-16 divide-y divide-accent md:pt-20 md:divide-y-0">
       <PostCard
         author={post.authorDid}
         createdAt={post.createdAt}

diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx
@@ -44,7 +44,7 @@ export default async function Post(props: { params: Promise<PostPageParams> }) {
   const comments = await getCommentsForPost(post.id);
 
   return (
-    <div className="pt-4 px-4 space-y-4">
+    <div className="pt-4 px-4 space-y-4 md:px-2">
       <LinkAlternateAtUri
         authority={authorDid}
         collection={PostCollection}

diff --git a/packages/frontpage/app/(auth)/login/page.tsx b/packages/frontpage/app/(auth)/login/page.tsx
@@ -17,7 +17,7 @@ export default async function LoginPage() {
             Sign in to Frontpage
           </h2>
           <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            Don&apos;t have an account?{" "}
+            Don&apos;t have an account?
             <a
               href="https://bsky.app/"
               className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"

diff --git a/packages/unravel/app/layout.tsx b/packages/unravel/app/layout.tsx
@@ -31,7 +31,6 @@ export default function RootLayout({
           "bg-slate-50/50 dark:bg-slate-950 min-h-screen",
         )}
       >
-        {" "}
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,7 +54,7 @@ export async function DidHandle({ did }: { did: string }) { @@
             </Link>
           ) : (
             "⚠️ Invalid Handle"
-          )}{" "}
+          )}
           (<Link href={`/at/${didDocument.id}`}>{didDocument.id}</Link>)
         </>
       );
@@ Expand Down @@