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

@@ -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>

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,6 +147,8 @@ export const TaskFormPage: React.FC = () => {
           {/* Description with Markdown */}
           <Field.Root required>
             <Field.Label>{t('challenge.admin.tasks.field.description')}</Field.Label>
+            <Box display={{ base: 'block', lg: 'none' }}>
+              {/* Табы для мобильных */}
               <Tabs.Root
                 value={showDescPreview ? 'preview' : 'editor'}
                 onValueChange={(e) => setShowDescPreview(e.value === 'preview')}
@@ -185,6 +188,54 @@ export const TaskFormPage: React.FC = () => {
                   </Box>
                 </Tabs.Content>
               </Tabs.Root>
+            </Box>
+            
+            {/* Две колонки для десктопа */}
+            <Grid
+              display={{ base: 'none', lg: 'grid' }}
+              templateColumns="1fr 1fr"
+              gap={4}
+              mt={2}
+            >
+              <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={20}
+                  fontFamily="monospace"
+                  disabled={isLoading}
+                />
+              </Box>
+              <Box>
+                <Text fontSize="sm" fontWeight="medium" mb={2} color="gray.700">
+                  {t('challenge.admin.tasks.tab.preview')}
+                </Text>
+                <Box
+                  p={4}
+                  borderWidth="1px"
+                  borderColor="gray.200"
+                  borderRadius="md"
+                  minH="300px"
+                  bg="gray.50"
+                  height="100%"
+                  overflowY="auto"
+                >
+                  {description ? (
+                    <Box className="markdown-preview">
+                      <ReactMarkdown>{description}</ReactMarkdown>
+                    </Box>
+                  ) : (
+                    <Text color="gray.400" fontStyle="italic">
+                      {t('challenge.admin.tasks.preview.empty')}
+                    </Text>
+                  )}
+                </Box>
+              </Box>
+            </Grid>
             <Field.HelperText>{t('challenge.admin.tasks.field.description.helper')}</Field.HelperText>
           </Field.Root>