From f0b1130da23719690b37cb270c54745c09998ec5 Mon Sep 17 00:00:00 2001
From: Primakov Alexandr Alexandrovich <primakov.pro@yandex.ru>
Date: Tue, 4 Nov 2025 10:37:24 +0300
Subject: [PATCH] Update Layout component to use 95% width for the main
 container. Enhance TaskFormPage with responsive tabs for mobile and desktop
 layouts, improving user experience for editing and previewing task
 descriptions.

---
 src/components/Layout.tsx        |  2 +-
 src/pages/tasks/TaskFormPage.tsx | 77 ++++++++++++++++++++++++++------
 2 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 7645e14..2790daf 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -122,7 +122,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
       </Box>
 
       {/* Main Content */}
-      <Container maxW="container.xl" py={8}>
+      <Container maxW="95%" py={8}>
         {children}
       </Container>
     </Box>
diff --git a/src/pages/tasks/TaskFormPage.tsx b/src/pages/tasks/TaskFormPage.tsx
index 7884239..6ac4cb4 100644
--- a/src/pages/tasks/TaskFormPage.tsx
+++ b/src/pages/tasks/TaskFormPage.tsx
@@ -12,6 +12,7 @@ import {
   Text,
   Field,
   Tabs,
+  Grid,
 } from '@chakra-ui/react'
 import ReactMarkdown from 'react-markdown'
 import {
@@ -146,25 +147,73 @@ export const TaskFormPage: React.FC = () => {
           {/* Description with Markdown */}
           <Field.Root required>
             <Field.Label>{t('challenge.admin.tasks.field.description')}</Field.Label>
-            <Tabs.Root
-              value={showDescPreview ? 'preview' : 'editor'}
-              onValueChange={(e) => setShowDescPreview(e.value === 'preview')}
+            <Box display={{ base: 'block', lg: 'none' }}>
+              {/* Табы для мобильных */}
+              <Tabs.Root
+                value={showDescPreview ? 'preview' : 'editor'}
+                onValueChange={(e) => setShowDescPreview(e.value === 'preview')}
+              >
+                <Tabs.List>
+                  <Tabs.Trigger value="editor">{t('challenge.admin.tasks.tab.editor')}</Tabs.Trigger>
+                  <Tabs.Trigger value="preview">{t('challenge.admin.tasks.tab.preview')}</Tabs.Trigger>
+                </Tabs.List>
+                <Tabs.Content value="editor" pt={4}>
+                  <Textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder={t('challenge.admin.tasks.field.description.placeholder')}
+                    rows={15}
+                    fontFamily="monospace"
+                    disabled={isLoading}
+                  />
+                </Tabs.Content>
+                <Tabs.Content value="preview" pt={4}>
+                  <Box
+                    p={4}
+                    borderWidth="1px"
+                    borderColor="gray.200"
+                    borderRadius="md"
+                    minH="300px"
+                    bg="gray.50"
+                  >
+                    {description ? (
+                      <Box className="markdown-preview">
+                        <ReactMarkdown>{description}</ReactMarkdown>
+                      </Box>
+                    ) : (
+                      <Text color="gray.400" fontStyle="italic">
+                        {t('challenge.admin.tasks.preview.empty')}
+                      </Text>
+                    )}
+                  </Box>
+                </Tabs.Content>
+              </Tabs.Root>
+            </Box>
+            
+            {/* Две колонки для десктопа */}
+            <Grid
+              display={{ base: 'none', lg: 'grid' }}
+              templateColumns="1fr 1fr"
+              gap={4}
+              mt={2}
             >
-              <Tabs.List>
-                <Tabs.Trigger value="editor">{t('challenge.admin.tasks.tab.editor')}</Tabs.Trigger>
-                <Tabs.Trigger value="preview">{t('challenge.admin.tasks.tab.preview')}</Tabs.Trigger>
-              </Tabs.List>
-              <Tabs.Content value="editor" pt={4}>
+              <Box>
+                <Text fontSize="sm" fontWeight="medium" mb={2} color="gray.700">
+                  {t('challenge.admin.tasks.tab.editor')}
+                </Text>
                 <Textarea
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   placeholder={t('challenge.admin.tasks.field.description.placeholder')}
-                  rows={15}
+                  rows={20}
                   fontFamily="monospace"
                   disabled={isLoading}
                 />
-              </Tabs.Content>
-              <Tabs.Content value="preview" pt={4}>
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="medium" mb={2} color="gray.700">
+                  {t('challenge.admin.tasks.tab.preview')}
+                </Text>
                 <Box
                   p={4}
                   borderWidth="1px"
@@ -172,6 +221,8 @@ export const TaskFormPage: React.FC = () => {
                   borderRadius="md"
                   minH="300px"
                   bg="gray.50"
+                  height="100%"
+                  overflowY="auto"
                 >
                   {description ? (
                     <Box className="markdown-preview">
@@ -183,8 +234,8 @@ export const TaskFormPage: React.FC = () => {
                     </Text>
                   )}
                 </Box>
-              </Tabs.Content>
-            </Tabs.Root>
+              </Box>
+            </Grid>
             <Field.HelperText>{t('challenge.admin.tasks.field.description.helper')}</Field.HelperText>
           </Field.Root>