side scroll the pub list

app/p/[didOrHandle]/(profile)/ProfileHeader.tsx

···
         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>
     </>
···
   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
···
         }}
       >
         <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>
   );

app/p/[didOrHandle]/(profile)/ProfileTabs.tsx

···
   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"

components/ActionBar/Publications.tsx

···
 
   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"]}`}