fix(issue-details): improve mobile layout on issue details page

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
@@ -94,9 +101,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,26 +115,20 @@ 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={{
-                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' ? (
@@ -195,23 +198,8 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
           </Box>
 
           {issue.authorLogin && (
-            <Box
-              sx={{ width: { xs: '100%', sm: 'auto' }, 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>
+            <Box sx={{ minWidth: { sm: 140 } }}>
+              <Typography sx={metaLabelSx}>Author</Typography>
               <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Avatar
                   src={getGithubAvatarSrc(issue.authorLogin)}
@@ -235,20 +223,8 @@ const IssueHeaderCard: React.FC<IssueHeaderCardProps> = ({ issue }) => {
             </Box>
           )}
 
-          <Box
-            sx={{ width: { xs: '100%', sm: 'auto' }, 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>
+          <Box sx={{ minWidth: { sm: 160 } }}>
+            <Typography sx={metaLabelSx}>Created</Typography>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
               <CalendarTodayOutlinedIcon
                 sx={{

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';
@@ -22,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;
@@ -34,7 +37,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 +443,7 @@ const IssueSubmissionsTable: React.FC<IssueSubmissionsTableProps> = ({
           <DataTable
             columns={columns}
             rows={otherSubmissions}
-            minWidth={isMobile ? 832 : undefined}
+            minWidth={SUBMISSIONS_TABLE_MIN_WIDTH}
             getRowKey={(submission) =>
               `${submission.repositoryFullName}-${submission.number}`
             }

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,