fix ui

frontend/src/components/ViewerModal.tsx

@@ -168,8 +168,8 @@ export default function ViewerModal({
             left: 0,
             right: 0,
             pt: 'max(env(safe-area-inset-top), 8px)',
-            px: 2,
+            px: { xs: 1, sm: 2 },
-            pb: 2,
+            pb: { xs: 1, sm: 2 },
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
@@ -177,26 +177,54 @@ export default function ViewerModal({
             zIndex: 1,
           }}
         >
-          <Typography variant="h6" color="white" noWrap sx={{ flex: 1, mr: 2 }}>
+          <Typography
+            variant="h6"
+            color="white"
+            noWrap
+            sx={{
+              flex: 1,
+              mr: { xs: 1, sm: 2 },
+              fontSize: { xs: '0.875rem', sm: '1.25rem' },
+            }}
+          >
             {asset.original_filename}
           </Typography>
 
-          <Box>
+          <Box sx={{ display: 'flex', gap: { xs: 0, sm: 0.5 } }}>
-            <IconButton color="inherit" onClick={handleDownload} sx={{ color: 'white' }}>
+            <IconButton
-              <DownloadIcon />
+              color="inherit"
+              onClick={handleDownload}
+              sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
+              size="small"
+            >
+              <DownloadIcon fontSize="small" />
             </IconButton>
             {onShare && (
-              <IconButton color="inherit" onClick={handleShare} sx={{ color: 'white' }}>
+              <IconButton
-                <ShareIcon />
+                color="inherit"
+                onClick={handleShare}
+                sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
+                size="small"
+              >
+                <ShareIcon fontSize="small" />
               </IconButton>
             )}
             {onDelete && (
-              <IconButton color="inherit" onClick={handleDelete} sx={{ color: 'white' }}>
+              <IconButton
-                <DeleteIcon />
+                color="inherit"
+                onClick={handleDelete}
+                sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
+                size="small"
+              >
+                <DeleteIcon fontSize="small" />
               </IconButton>
             )}
-            <IconButton onClick={onClose} sx={{ color: 'white' }}>
+            <IconButton
-              <CloseIcon />
+              onClick={onClose}
+              sx={{ color: 'white', p: { xs: 0.5, sm: 1 } }}
+              size="small"
+            >
+              <CloseIcon fontSize="small" />
             </IconButton>
           </Box>
         </Box>
@@ -205,30 +233,34 @@ export default function ViewerModal({
         {currentIndex > 0 && (
           <IconButton
             onClick={handlePrev}
+            size="small"
             sx={{
               position: 'absolute',
-              left: 16,
+              left: { xs: 4, sm: 16 },
               color: 'white',
               bgcolor: 'rgba(0,0,0,0.5)',
               '&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
+              p: { xs: 0.5, sm: 1 },
             }}
           >
-            <PrevIcon fontSize="large" />
+            <PrevIcon fontSize="medium" />
           </IconButton>
         )}
 
         {currentIndex < assets.length - 1 && (
           <IconButton
             onClick={handleNext}
+            size="small"
             sx={{
               position: 'absolute',
-              right: 16,
+              right: { xs: 4, sm: 16 },
               color: 'white',
               bgcolor: 'rgba(0,0,0,0.5)',
               '&:hover': { bgcolor: 'rgba(0,0,0,0.7)' },
+              p: { xs: 0.5, sm: 1 },
             }}
           >
-            <NextIcon fontSize="large" />
+            <NextIcon fontSize="medium" />
           </IconButton>
         )}
 
@@ -243,9 +275,10 @@ export default function ViewerModal({
             src={currentUrl}
             alt={asset.original_filename}
             sx={{
-              maxWidth: '95%',
+              maxWidth: { xs: 'calc(100% - 16px)', sm: '95%' },
-              maxHeight: '85%',
+              maxHeight: { xs: 'calc(100vh - 160px)', sm: '85%' },
               objectFit: 'contain',
+              px: { xs: 1, sm: 0 },
             }}
           />
         )}
@@ -257,8 +290,9 @@ export default function ViewerModal({
             controls
             autoPlay
             sx={{
-              maxWidth: '95%',
+              maxWidth: { xs: 'calc(100% - 16px)', sm: '95%' },
-              maxHeight: '85%',
+              maxHeight: { xs: 'calc(100vh - 160px)', sm: '85%' },
+              px: { xs: 1, sm: 0 },
             }}
           />
         )}
@@ -270,24 +304,25 @@ export default function ViewerModal({
             bottom: 0,
             left: 0,
             right: 0,
-            px: 2,
+            px: { xs: 1, sm: 2 },
-            pt: 2,
+            pt: { xs: 1, sm: 2 },
             pb: 'max(env(safe-area-inset-bottom), 8px)',
             bgcolor: 'rgba(0,0,0,0.5)',
             color: 'white',
             display: 'flex',
             justifyContent: 'center',
-            gap: 2,
+            gap: { xs: 1, sm: 2 },
+            flexWrap: 'wrap',
           }}
         >
-          <Typography variant="body2">
+          <Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
             {currentIndex + 1} / {assets.length}
           </Typography>
-          <Typography variant="body2">
+          <Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
             {(asset.size_bytes / 1024 / 1024).toFixed(2)} MB
           </Typography>
           {asset.width && asset.height && (
-            <Typography variant="body2">
+            <Typography variant="body2" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
               {asset.width} × {asset.height}
             </Typography>
           )}

frontend/src/pages/ShareViewPage.tsx

@@ -71,20 +71,20 @@ export default function ShareViewPage() {
         display: 'flex',
         alignItems: 'center',
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        p: 2,
+        p: { xs: 1, sm: 2 },
       }}
     >
       <Container maxWidth="md">
         <Paper
           elevation={24}
           sx={{
-            p: 4,
+            p: { xs: 2, sm: 3, md: 4 },
             borderRadius: 3,
           }}
         >
           <Box sx={{ textAlign: 'center', mb: 3 }}>
-            <CloudIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
+            <CloudIcon sx={{ fontSize: { xs: 48, sm: 64 }, color: 'primary.main', mb: 2 }} />
-            <Typography variant="h4" fontWeight="bold" gutterBottom>
+            <Typography variant="h4" fontWeight="bold" gutterBottom sx={{ fontSize: { xs: '1.5rem', sm: '2.125rem' } }}>
               Общий доступ к файлу
             </Typography>
           </Box>
@@ -135,7 +135,15 @@ export default function ShareViewPage() {
 
           {!loading && share && asset && (
             <Box>
-              <Typography variant="h6" gutterBottom>
+              <Typography
+                variant="h6"
+                gutterBottom
+                sx={{
+                  wordBreak: 'break-word',
+                  overflowWrap: 'anywhere',
+                  fontSize: { xs: '1rem', sm: '1.25rem' },
+                }}
+              >
                 {asset.original_filename}
               </Typography>
               <Typography variant="body2" color="text.secondary" gutterBottom>