From 5858e7467c4c3e33ebbc81b83c790b65318330b0 Mon Sep 17 00:00:00 2001
From: Nickmopen <nickmelnikov82@proton.me>
Date: Mon, 18 May 2026 19:54:50 +0300
Subject: [PATCH 1/3] fix(issue-details): improve mobile layout on issue
 details page

- Add scrollable tabs with auto scroll buttons so all tabs are reachable on narrow viewports
- Make issue title font size responsive (1.2rem on xs, 1.5rem on sm+) with word-break to prevent overflow
- Switch meta row (Bounty/Author/Created) from flex-column to a 2-column grid on mobile
- Always apply minWidth={832} on submissions table so columns never compress below readable widths
---
 src/components/issues/IssueHeaderCard.tsx     | 19 ++++++++++---------
 .../issues/IssueSubmissionsTable.tsx          |  4 +---
 src/pages/IssueDetailsPage.tsx                |  5 ++++-
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/issues/IssueHeaderCard.tsx b/src/components/issues/IssueHeaderCard.tsx
index 271f5e79..e85da6a5 100644
--- a/src/components/issues/IssueHeaderCard.tsx
+++ b/src/components/issues/IssueHeaderCard.tsx
@@ -94,9 +94,11 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
             sx={{
               fontFamily:
                 '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
-              fontSize: '1.5rem',
+              fontSize: { xs: '1.2rem', sm: '1.5rem' },
               fontWeight: 600,
               color: 'text.primary',
+              wordBreak: 'break-word',
+              overflowWrap: 'anywhere',
             }}
           >
             {issue.title}
@@ -106,16 +108,15 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
         {/* Bounty and metadata row */}
         <Box
           sx={{
-            display: 'flex',
-            alignItems: 'flex-start',
-            flexDirection: { xs: 'column', sm: 'row' },
-            columnGap: { sm: 4 },
+            display: 'grid',
+            gridTemplateColumns: { xs: '1fr 1fr', sm: 'auto auto auto' },
+            columnGap: { xs: 2, sm: 4 },
             rowGap: { xs: 1.75, sm: 2 },
-            flexWrap: { xs: 'nowrap', sm: 'wrap' },
+            alignItems: 'flex-start',
           }}
         >
           <Box
-            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 170 } }}
+            sx={{ gridColumn: { xs: '1 / -1', sm: 'auto' }, minWidth: { sm: 170 } }}
           >
             <Typography
               sx={{
@@ -196,7 +197,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
 
           {issue.authorLogin && (
             <Box
-              sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 140 } }}
+              sx={{ minWidth: { sm: 140 } }}
             >
               <Typography
                 sx={{
@@ -236,7 +237,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           )}
 
           <Box
-            sx={{ width: { xs: '100%', sm: 'auto' }, minWidth: { sm: 160 } }}
+            sx={{ minWidth: { sm: 160 } }}
           >
             <Typography
               sx={{
diff --git a/src/components/issues/IssueSubmissionsTable.tsx b/src/components/issues/IssueSubmissionsTable.tsx
index 41de60ff..37be6296 100644
--- a/src/components/issues/IssueSubmissionsTable.tsx
+++ b/src/components/issues/IssueSubmissionsTable.tsx
@@ -7,7 +7,6 @@ import {
   CircularProgress,
   Typography,
   alpha,
-  useMediaQuery,
   useTheme,
 } from '@mui/material';
 import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
@@ -34,7 +33,6 @@ const IssueSubmissionsTable: React.FC<IssueSubmissionsTableProps> = ({
   backLabel,
 }) => {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const linkState = backLabel ? { backLabel } : undefined;
   const winnerSubmission =
     submissions?.find((submission) => submission.isWinner) ?? null;
@@ -441,7 +439,7 @@ const IssueSubmissionsTable: React.FC<IssueSubmissionsTableProps> = ({
           <DataTable
             columns={columns}
             rows={otherSubmissions}
-            minWidth={isMobile ? 832 : undefined}
+            minWidth={832}
             getRowKey={(submission) =>
               `${submission.repositoryFullName}-${submission.number}`
             }
diff --git a/src/pages/IssueDetailsPage.tsx b/src/pages/IssueDetailsPage.tsx
index 01004e0e..8195c3dd 100644
--- a/src/pages/IssueDetailsPage.tsx
+++ b/src/pages/IssueDetailsPage.tsx
@@ -145,6 +145,8 @@ const IssueDetailsPage: React.FC = () => {
                 value={tabValue}
                 onChange={handleTabChange}
                 aria-label="issue details tabs"
+                variant="scrollable"
+                scrollButtons="auto"
                 sx={(theme) => ({
                   '& .MuiTab-root': {
                     color: STATUS_COLORS.open,
@@ -153,7 +155,8 @@ const IssueDetailsPage: React.FC = () => {
                     textTransform: 'none',
                     fontWeight: 500,
                     minHeight: '48px',
-                    fontSize: '14px',
+                    fontSize: { xs: '13px', sm: '14px' },
+                    px: { xs: 1.5, sm: 2 },
                     '&.Mui-selected': {
                       color: theme.palette.text.primary,
                       fontWeight: 600,

From 02aef653478132b539bde4302701a4950089fb6c Mon Sep 17 00:00:00 2001
From: Nickmopen <nickmelnikov82@proton.me>
Date: Mon, 18 May 2026 21:22:38 +0300
Subject: [PATCH 2/3] chore: apply prettier formatting to IssueHeaderCard

---
 src/components/issues/IssueHeaderCard.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/issues/IssueHeaderCard.tsx b/src/components/issues/IssueHeaderCard.tsx
index e85da6a5..dc83aa12 100644
--- a/src/components/issues/IssueHeaderCard.tsx
+++ b/src/components/issues/IssueHeaderCard.tsx
@@ -116,7 +116,10 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           }}
         >
           <Box
-            sx={{ gridColumn: { xs: '1 / -1', sm: 'auto' }, minWidth: { sm: 170 } }}
+            sx={{
+              gridColumn: { xs: '1 / -1', sm: 'auto' },
+              minWidth: { sm: 170 },
+            }}
           >
             <Typography
               sx={{
@@ -196,9 +199,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           </Box>
 
           {issue.authorLogin && (
-            <Box
-              sx={{ minWidth: { sm: 140 } }}
-            >
+            <Box sx={{ minWidth: { sm: 140 } }}>
               <Typography
                 sx={{
                   fontSize: '0.7rem',
@@ -236,9 +237,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
             </Box>
           )}
 
-          <Box
-            sx={{ minWidth: { sm: 160 } }}
-          >
+          <Box sx={{ minWidth: { sm: 160 } }}>
             <Typography
               sx={{
                 fontSize: '0.7rem',

From 0c5e5972acb790fbd999849b76b9d257d8d5393c Mon Sep 17 00:00:00 2001
From: Nickmopen <nickmelnikov82@proton.me>
Date: Mon, 18 May 2026 23:21:19 +0300
Subject: [PATCH 3/3] refactor(issue-details): dedupe meta label styles and
 name table min-width

Extract the repeated meta-label sx in IssueHeaderCard into a single
metaLabelSx const, and replace the bare minWidth={832} magic number in
IssueSubmissionsTable with a named, documented constant. No UI change.
---
 src/components/issues/IssueHeaderCard.tsx     | 44 +++++--------------
 .../issues/IssueSubmissionsTable.tsx          |  6 ++-
 2 files changed, 15 insertions(+), 35 deletions(-)

diff --git a/src/components/issues/IssueHeaderCard.tsx b/src/components/issues/IssueHeaderCard.tsx
index dc83aa12..acf2e83c 100644
--- a/src/components/issues/IssueHeaderCard.tsx
+++ b/src/components/issues/IssueHeaderCard.tsx
@@ -34,6 +34,13 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
   const usdEstimate = hasPrices
     ? formatAlphaToUsd(issue.targetBounty, taoPrice, alphaPrice)
     : null;
+  const metaLabelSx = {
+    fontSize: '0.7rem',
+    color: alpha(theme.palette.common.white, TEXT_OPACITY.tertiary),
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.5px',
+    mb: 0.9,
+  };
 
   return (
     <Card
@@ -121,15 +128,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
               minWidth: { sm: 170 },
             }}
           >
-            <Typography
-              sx={{
-                fontSize: '0.7rem',
-                color: alpha(theme.palette.common.white, TEXT_OPACITY.tertiary),
-                textTransform: 'uppercase',
-                letterSpacing: '0.5px',
-                mb: 0.5,
-              }}
-            >
+            <Typography sx={{ ...metaLabelSx, mb: 0.5 }}>
               {issue.status === 'completed' ? 'Payout' : 'Bounty'}
             </Typography>
             {issue.status === 'registered' ? (
@@ -200,20 +199,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
 
           {issue.authorLogin && (
             <Box sx={{ minWidth: { sm: 140 } }}>
-              <Typography
-                sx={{
-                  fontSize: '0.7rem',
-                  color: alpha(
-                    theme.palette.common.white,
-                    TEXT_OPACITY.tertiary,
-                  ),
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.5px',
-                  mb: 0.9,
-                }}
-              >
-                Author
-              </Typography>
+              <Typography sx={metaLabelSx}>Author</Typography>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Avatar
                   src={getGithubAvatarSrc(issue.authorLogin)}
@@ -238,17 +224,7 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           )}
 
           <Box sx={{ minWidth: { sm: 160 } }}>
-            <Typography
-              sx={{
-                fontSize: '0.7rem',
-                color: alpha(theme.palette.common.white, TEXT_OPACITY.tertiary),
-                textTransform: 'uppercase',
-                letterSpacing: '0.5px',
-                mb: 0.9,
-              }}
-            >
-              Created
-            </Typography>
+            <Typography sx={metaLabelSx}>Created</Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
               <CalendarTodayOutlinedIcon
                 sx={{
diff --git a/src/components/issues/IssueSubmissionsTable.tsx b/src/components/issues/IssueSubmissionsTable.tsx
index 37be6296..472a001b 100644
--- a/src/components/issues/IssueSubmissionsTable.tsx
+++ b/src/components/issues/IssueSubmissionsTable.tsx
@@ -21,6 +21,10 @@ import {
   type DataTableColumn,
 } from '../../components/common/DataTable';
 
+// Sum of the fixed column widths below; keeps the table from compressing
+// into an unreadable layout on narrow viewports (scrolls horizontally instead).
+const SUBMISSIONS_TABLE_MIN_WIDTH = 832;
+
 interface IssueSubmissionsTableProps {
   submissions: IssueSubmission[] | undefined;
   isLoading: boolean;
@@ -439,7 +443,7 @@ const IssueSubmissionsTable: React.FC<IssueSubmissionsTableProps> = ({
           <DataTable
             columns={columns}
             rows={otherSubmissions}
-            minWidth={832}
+            minWidth={SUBMISSIONS_TABLE_MIN_WIDTH}
             getRowKey={(submission) =>
               `${submission.repositoryFullName}-${submission.number}`
             }