From 8edc291b598b13a673c58cc2b2aa1f724fa02c49 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Sun, 24 May 2026 19:07:44 +0100
Subject: [PATCH] fix(mobile): responsive tabs grid-cols, FocusGroupSession
 fixed height, MyUsage table scroll

---
 src/components/UserCreator.tsx      | 14 +++++++-------
 src/components/landing/UseCases.tsx |  2 +-
 src/pages/FocusGroupSession.tsx     | 26 +++++++++++++-------------
 src/pages/MyUsage.tsx               |  2 +-
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/UserCreator.tsx b/src/components/UserCreator.tsx
index dcf108d3..68359ba4 100755
--- a/src/components/UserCreator.tsx
+++ b/src/components/UserCreator.tsx
@@ -577,13 +577,13 @@ export default function UserCreator({ targetFolderId, targetFolderName }: UserCr
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <Tabs defaultValue="basic">
-            <TabsList className="grid w-full grid-cols-6 sticky top-0 z-10 bg-card">
-              <TabsTrigger value="basic">{t('persona_editor.tab_basic')}</TabsTrigger>
-              <TabsTrigger value="attitudinal">{t('persona_editor.tab_attitudinal')}</TabsTrigger>
-              <TabsTrigger value="personality">{t('persona_editor.tab_personality')}</TabsTrigger>
-              <TabsTrigger value="demographics">{t('persona_editor.tab_demographics')}</TabsTrigger>
-              <TabsTrigger value="lifestyle">{t('persona_editor.tab_lifestyle')}</TabsTrigger>
-              <TabsTrigger value="extended">{t('persona_editor.tab_extended')}</TabsTrigger>
+            <TabsList className="grid w-full grid-cols-3 sm:grid-cols-6 sticky top-0 z-10 bg-card">
+              <TabsTrigger value="basic" className="text-xs sm:text-sm">{t('persona_editor.tab_basic')}</TabsTrigger>
+              <TabsTrigger value="attitudinal" className="text-xs sm:text-sm">{t('persona_editor.tab_attitudinal')}</TabsTrigger>
+              <TabsTrigger value="personality" className="text-xs sm:text-sm">{t('persona_editor.tab_personality')}</TabsTrigger>
+              <TabsTrigger value="demographics" className="text-xs sm:text-sm">{t('persona_editor.tab_demographics')}</TabsTrigger>
+              <TabsTrigger value="lifestyle" className="text-xs sm:text-sm">{t('persona_editor.tab_lifestyle')}</TabsTrigger>
+              <TabsTrigger value="extended" className="text-xs sm:text-sm">{t('persona_editor.tab_extended')}</TabsTrigger>
             </TabsList>
             
             <TabsContent value="basic" className="mt-6">
diff --git a/src/components/landing/UseCases.tsx b/src/components/landing/UseCases.tsx
index 9be4615a..a6a5be29 100644
--- a/src/components/landing/UseCases.tsx
+++ b/src/components/landing/UseCases.tsx
@@ -38,7 +38,7 @@ export default function UseCases() {
                   <TabsTrigger
                     key={id}
                     value={id}
-                    className="flex-1 rounded-full text-sm font-medium data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground transition-all py-2"
+                    className="flex-1 rounded-full text-xs sm:text-sm font-medium data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground transition-all py-1.5 sm:py-2 px-1 sm:px-3"
                   >
                     {t(`use_cases.${id}.label`)}
                   </TabsTrigger>
diff --git a/src/pages/FocusGroupSession.tsx b/src/pages/FocusGroupSession.tsx
index cec963c9..bbc1f0de 100755
--- a/src/pages/FocusGroupSession.tsx
+++ b/src/pages/FocusGroupSession.tsx
@@ -1988,7 +1988,7 @@ const FocusGroupSession = () => {
           onEditingChange={handleGuideEditingStateChange}
         />
         
-        <div className="flex flex-col lg:flex-row gap-6 h-[calc(100vh-12rem)]">
+        <div className="flex flex-col lg:flex-row gap-6 lg:h-[calc(100vh-12rem)]">
           <ParticipantPanel 
             participants={participants}
             selectedParticipantIds={selectedParticipantIds}
@@ -1998,21 +1998,21 @@ const FocusGroupSession = () => {
           <div className="flex-1 flex flex-col">
             <Tabs defaultValue="chat" value={activeTab} onValueChange={setActiveTab} className="w-full h-full flex flex-col">
               <TabsList className="grid grid-cols-4 mb-4">
-                <TabsTrigger value="chat" className="flex items-center">
-                  <MessageCircle className="h-4 w-4 mr-2" />
-                  Discussion
+                <TabsTrigger value="chat" className="flex items-center gap-1 sm:gap-2">
+                  <MessageCircle className="h-4 w-4 flex-shrink-0" />
+                  <span className="hidden sm:inline">Discussion</span>
                 </TabsTrigger>
-                <TabsTrigger value="themes" className="flex items-center">
-                  <Lightbulb className="h-4 w-4 mr-2" />
-                  Key Themes
+                <TabsTrigger value="themes" className="flex items-center gap-1 sm:gap-2">
+                  <Lightbulb className="h-4 w-4 flex-shrink-0" />
+                  <span className="hidden sm:inline">Key Themes</span>
                 </TabsTrigger>
-                <TabsTrigger value="notes" className="flex items-center">
-                  <StickyNote className="h-4 w-4 mr-2" />
-                  Notes
+                <TabsTrigger value="notes" className="flex items-center gap-1 sm:gap-2">
+                  <StickyNote className="h-4 w-4 flex-shrink-0" />
+                  <span className="hidden sm:inline">Notes</span>
                 </TabsTrigger>
-                <TabsTrigger value="analytics" className="flex items-center">
-                  <BarChart className="h-4 w-4 mr-2" />
-                  Analytics
+                <TabsTrigger value="analytics" className="flex items-center gap-1 sm:gap-2">
+                  <BarChart className="h-4 w-4 flex-shrink-0" />
+                  <span className="hidden sm:inline">Analytics</span>
                 </TabsTrigger>
               </TabsList>
               
diff --git a/src/pages/MyUsage.tsx b/src/pages/MyUsage.tsx
index 5b442484..a5f827ea 100644
--- a/src/pages/MyUsage.tsx
+++ b/src/pages/MyUsage.tsx
@@ -45,7 +45,7 @@ export default function MyUsage() {
 
             <div>
               <h2 className="font-display font-semibold text-xl text-foreground mb-4">{t('usage.by_feature')}</h2>
-              <div className="bg-card border border-border rounded-2xl overflow-hidden">
+              <div className="bg-card border border-border rounded-2xl overflow-hidden overflow-x-auto">
                 <Table>
                   <TableHeader>
                     <TableRow className="border-border hover:bg-transparent">