From 0e629ee9248871c3a82a238dc42b04b577d6321a Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 12 Dec 2025 04:26:38 -0500
Subject: [PATCH] side scroll the pub list

---
 .../[didOrHandle]/(profile)/ProfileHeader.tsx | 40 ++++++++++++-------
 app/p/[didOrHandle]/(profile)/ProfileTabs.tsx |  2 +-
 components/ActionBar/Publications.tsx         |  2 +-
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx b/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
index 295aa981..0671605a 100644
--- a/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
+++ b/app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
@@ -25,25 +25,30 @@ export const ProfileHeader = (props: {
         className="mx-auto -mt-8"
         giant
       />
-      <div className="px-3 sm:px-4 flex flex-col">
-        <h3 className="pt-2 leading-tight">
+      <div className="flex flex-col">
+        <h3 className=" px-3 sm:px-4 pt-2 leading-tight">
           {profileRecord.displayName
             ? profileRecord.displayName
             : `@${props.profile.handle}`}
         </h3>
         {profileRecord.displayName && (
-          <div className="text-tertiary text-sm pb-1 italic">
+          <div className="text-tertiary text-sm pb-1 italic px-3 sm:px-4 truncate">
             @{props.profile.handle}
           </div>
         )}
-        <div className="text-secondary">{profileRecord.description}</div>
-        <div className="flex flex-row gap-2 mx-auto my-3">
-          {props.publications.map((p) => (
-            <PublicationCard
-              record={p.record as PubLeafletPublication.Record}
-              uri={p.uri}
-            />
-          ))}
+        <div className="text-secondary px-3 sm:px-4 ">
+          {profileRecord.description}
+        </div>
+        <div className=" w-full overflow-x-scroll mt-3 mb-6 ">
+          <div className="grid grid-flow-col  auto-cols-[164px] sm:auto-cols-[240px] gap-2 mx-auto w-fit px-3 sm:px-4 ">
+            {/*<div className="spacer "/>*/}
+            {props.publications.map((p) => (
+              <PublicationCard
+                record={p.record as PubLeafletPublication.Record}
+                uri={p.uri}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </>
@@ -55,12 +60,12 @@ const PublicationCard = (props: {
   uri: string;
 }) => {
   const { record, uri } = props;
-  const { bgLeaflet, bgPage } = usePubTheme(record.theme);
+  const { bgLeaflet, bgPage, primary } = usePubTheme(record.theme);
 
   return (
     <a
       href={`https://${record.base_path}`}
-      className="border border-border p-2 rounded-lg hover:no-underline!"
+      className="border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2"
       style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }}
     >
       <div
@@ -72,7 +77,14 @@ const PublicationCard = (props: {
         }}
       >
         <PubIcon record={record} uri={uri} />
-        <h4>{record.name}</h4>
+        <h4
+          className="truncate min-w-0"
+          style={{
+            color: `rgb(${colorToString(primary, "rgb")})`,
+          }}
+        >
+          {record.name}
+        </h4>
       </div>
     </a>
   );
diff --git a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
index 62e175a2..531001a8 100644
--- a/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
+++ b/app/p/[didOrHandle]/(profile)/ProfileTabs.tsx
@@ -41,7 +41,7 @@ const TabLink = (props: { href: string; name: string; selected: boolean }) => {
   return (
     <SpeedyLink
       href={props.href}
-      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${
+      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer hover:no-underline! ${
         props.selected
           ? "text-accent-2 bg-accent-1 font-bold -mb-px"
           : "text-tertiary"
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 2423777a..964d3b5e 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -193,7 +193,7 @@ export const PubIcon = (props: {
 
   return props.record.icon ? (
     <div
-      className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}
+      className={`${iconSizeClassName} ${props.className} relative overflow-hidden shrink-0`}
     >
       <img
         src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}
-- 
2.51.2