From 89f94c1a6ec6bf2d52b444219b520675a7532345 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Wed, 17 Jun 2026 13:48:59 +0530
Subject: [PATCH] fix: ui fixes in transcript nav

---
 app/(app)/transcriptions/transcriptions-nav.tsx | 4 ++--
 components/social/post/post-scroll-card.tsx     | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/(app)/transcriptions/transcriptions-nav.tsx b/app/(app)/transcriptions/transcriptions-nav.tsx
index 9ec89bbc..b3ab5203 100644
--- a/app/(app)/transcriptions/transcriptions-nav.tsx
+++ b/app/(app)/transcriptions/transcriptions-nav.tsx
@@ -13,7 +13,7 @@ const views = [
 
 export function TranscriptionsNav({ currentView }: { currentView: string }) {
   return (
-    <div className="flex gap-2 border-b border-border pb-3">
+    <div className="flex gap-2 border-b border-border pb-3 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       {views.map((v) => {
         const Icon = v.icon;
         const isActive = currentView === v.key;
@@ -22,7 +22,7 @@ export function TranscriptionsNav({ currentView }: { currentView: string }) {
             key={v.key}
             href={`/transcriptions?view=${v.key}`}
             className={cn(
-              "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
+              "flex shrink-0 items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
               isActive
                 ? "bg-primary/10 text-primary"
                 : "text-muted-foreground hover:bg-muted hover:text-foreground",
diff --git a/components/social/post/post-scroll-card.tsx b/components/social/post/post-scroll-card.tsx
index 85948a79..231ebc79 100644
--- a/components/social/post/post-scroll-card.tsx
+++ b/components/social/post/post-scroll-card.tsx
@@ -344,9 +344,18 @@ function Caption({
     <div className="text-sm text-foreground leading-relaxed">
       <p
         ref={pRef}
+        onClick={
+          showToggle
+            ? (e) => {
+                e.stopPropagation();
+                onToggle();
+              }
+            : undefined
+        }
         className={cn(
           "font-[family-name:var(--font-title)] break-words",
           !expanded && "line-clamp-3",
+          showToggle && "cursor-pointer",
         )}
       >
         “{text}”