From c7dff4ca495730c39819e59eba5931d1a3898d63 Mon Sep 17 00:00:00 2001
From: Pawan Kumar Singh <pawankalhansh@gmail.com>
Date: Fri, 15 May 2026 02:42:25 +0530
Subject: [PATCH 1/3] fix: make issue details tabs mobile scrollable

---
 src/pages/IssueDetailsPage.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/IssueDetailsPage.tsx b/src/pages/IssueDetailsPage.tsx
index 01004e0e..5eb523d8 100644
--- a/src/pages/IssueDetailsPage.tsx
+++ b/src/pages/IssueDetailsPage.tsx
@@ -145,15 +145,23 @@ const IssueDetailsPage: React.FC = () => {
                 value={tabValue}
                 onChange={handleTabChange}
                 aria-label="issue details tabs"
+                variant="scrollable"
+                scrollButtons="auto"
+                allowScrollButtonsMobile
                 sx={(theme) => ({
+                  maxWidth: '100%',
+                  minHeight: { xs: 44, sm: 48 },
                   '& .MuiTab-root': {
                     color: STATUS_COLORS.open,
                     fontFamily:
                       '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
                     textTransform: 'none',
                     fontWeight: 500,
-                    minHeight: '48px',
-                    fontSize: '14px',
+                    minWidth: { xs: 'auto', sm: 90 },
+                    minHeight: { xs: 44, sm: 48 },
+                    px: { xs: 1.25, sm: 2 },
+                    fontSize: { xs: '0.78rem', sm: '14px' },
+                    whiteSpace: 'nowrap',
                     '&.Mui-selected': {
                       color: theme.palette.text.primary,
                       fontWeight: 600,

From 3e5a53521745629eaddeb17a43d452c07fa53ee2 Mon Sep 17 00:00:00 2001
From: Pawan Kumar Singh <pawankalhansh@gmail.com>
Date: Fri, 15 May 2026 02:42:27 +0530
Subject: [PATCH 2/3] fix: improve issue header mobile layout

---
 src/components/issues/IssueHeaderCard.tsx | 36 ++++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/issues/IssueHeaderCard.tsx b/src/components/issues/IssueHeaderCard.tsx
index 271f5e79..38f5b203 100644
--- a/src/components/issues/IssueHeaderCard.tsx
+++ b/src/components/issues/IssueHeaderCard.tsx
@@ -40,18 +40,18 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
       sx={{
         backgroundColor: 'background.default',
         border: `1px solid ${theme.palette.border.light}`,
-        borderRadius: 3,
-        p: { xs: 2, sm: 3 },
+        borderRadius: { xs: 2, sm: 3 },
+        p: { xs: 1.5, sm: 3 },
       }}
       elevation={0}
     >
-      <Stack spacing={2}>
+      <Stack spacing={{ xs: 1.5, sm: 2 }}>
         {/* Repository and Issue Number */}
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
-            gap: 2,
+            gap: { xs: 1, sm: 2 },
             flexWrap: 'wrap',
           }}
         >
@@ -64,7 +64,10 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
               alignItems: 'center',
               flexWrap: 'wrap',
               gap: 0.5,
-              fontSize: { xs: '0.95rem', sm: '1rem' },
+              minWidth: 0,
+              maxWidth: '100%',
+              overflowWrap: 'anywhere',
+              fontSize: { xs: '0.86rem', sm: '1rem' },
               color: STATUS_COLORS.info,
               textDecoration: 'none',
               '&:hover': {
@@ -94,8 +97,10 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
             sx={{
               fontFamily:
                 '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
-              fontSize: '1.5rem',
+              fontSize: { xs: '1.15rem', sm: '1.5rem' },
               fontWeight: 600,
+              lineHeight: 1.25,
+              overflowWrap: 'anywhere',
               color: 'text.primary',
             }}
           >
@@ -106,16 +111,16 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
         {/* Bounty and metadata row */}
         <Box
           sx={{
-            display: 'flex',
+            display: { xs: 'grid', sm: 'flex' },
             alignItems: 'flex-start',
-            flexDirection: { xs: 'column', sm: 'row' },
-            columnGap: { sm: 4 },
-            rowGap: { xs: 1.75, sm: 2 },
-            flexWrap: { xs: 'nowrap', sm: 'wrap' },
+            gridTemplateColumns: { xs: 'repeat(2, minmax(0, 1fr))', sm: 'none' },
+            columnGap: { xs: 1.5, sm: 4 },
+            rowGap: { xs: 1.5, sm: 2 },
+            flexWrap: { sm: 'wrap' },
           }}
         >
           <Box
-            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 170 } }}
+            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { xs: 0, sm: 170 } }}
           >
             <Typography
               sx={{
@@ -196,7 +201,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
 
           {issue.authorLogin && (
             <Box
-              sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 140 } }}
+              sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { xs: 0, sm: 140 } }}
             >
               <Typography
                 sx={{
@@ -227,6 +232,9 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
                     fontSize: '0.9rem',
                     color: 'text.primary',
                     lineHeight: 1.2,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
                   }}
                 >
                   {issue.authorLogin}
@@ -236,7 +244,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           )}
 
           <Box
-            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 160 } }}
+            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { xs: 0, sm: 160 } }}
           >
             <Typography
               sx={{

From a1b44c4c4bcda27ab1f638a72958a23c91d57400 Mon Sep 17 00:00:00 2001
From: Pawan Kumar Singh <pawankalhansh@gmail.com>
Date: Fri, 15 May 2026 02:42:29 +0530
Subject: [PATCH 3/3] fix: tighten issue conversation spacing on mobile

---
 src/components/common/ConversationTimeline.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/ConversationTimeline.tsx b/src/components/common/ConversationTimeline.tsx
index e009f219..ba4dd490 100644
--- a/src/components/common/ConversationTimeline.tsx
+++ b/src/components/common/ConversationTimeline.tsx
@@ -98,8 +98,8 @@ const ConversationTimeline: React.FC<ConversationTimelineProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: 3,
-        pt: 2,
+        gap: { xs: 2, sm: 3 },
+        pt: { xs: 1.5, sm: 2 },
         maxWidth: '960px',
         mx: 'auto',
         position: 'relative',