From 2ffd94bd5b26adaef8f8101f47b5c32fe2da91a4 Mon Sep 17 00:00:00 2001
From: popovspiridon99 <popovspiridon0799@mail.ru>
Date: Thu, 25 Sep 2025 16:42:19 +0900
Subject: [PATCH] smaller tab's text in TabsPane; use Drawer in MapComponent
 for object view

---
 client/src/components/map/MapComponent.tsx    | 38 +++++++++++--------
 .../src/components/map/TabsPane/TabsPane.tsx  |  6 ++-
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/client/src/components/map/MapComponent.tsx b/client/src/components/map/MapComponent.tsx
index b602eb4..b4ebaef 100644
--- a/client/src/components/map/MapComponent.tsx
+++ b/client/src/components/map/MapComponent.tsx
@@ -255,7 +255,7 @@ const MapComponent = ({
                         feature.setStyle(highlightStyleRed)
 
                         const geometry = feature.getGeometry()
-
+                        
                         if (geometry) {
                             map?.getView().fit(geometry as SimpleGeometry, { duration: 500, maxZoom: 18 })
                         }
@@ -846,22 +846,28 @@ const MapComponent = ({
                             <div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
                                 <div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
                                     {selectedRegion && selectedDistrict && selectedYear &&
-                                        <div
-                                            style={{
-                                                ...mapControlsStyle,
-                                                transition: 'width .3s ease',
-                                                display: 'flex',
-                                                flexDirection: 'column',
-                                                height: '100%',
-                                                width: leftPaneHidden ? '0px' : '100%',
-                                                overflow: 'hidden'
-                                            }}
-                                        >
-                                            <TabsPane defaultTab='objects' tabs={objectsPane} />
-                                            <Divider />
-                                            <TabsPane defaultTab='parameters' tabs={paramsPane} />
-                                        </div>
+                                        // <div
+                                        //     style={{
+                                        //         ...mapControlsStyle,
+                                        //         transition: 'width .3s ease',
+                                        //         display: 'flex',
+                                        //         flexDirection: 'column',
+                                        //         height: '100%',
+                                        //         width: leftPaneHidden ? '0px' : '100%',
+                                        //         overflow: 'hidden'
+                                        //     }}
+                                        // >
+                                        //     <TabsPane defaultTab='objects' tabs={objectsPane} />
+                                        //     <Divider />
+                                        //     <TabsPane defaultTab='parameters' tabs={paramsPane} />
+                                        // </div>
+                                        ""
                                     }
+                                    <Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 9999 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
+                                        <TabsPane defaultTab='objects' tabs={objectsPane} />
+                                        <Divider />
+                                        <TabsPane defaultTab='parameters' tabs={paramsPane} />
+                                    </Drawer>
 
                                     {!!selectedRegion && !!selectedDistrict && !!selectedYear &&
                                         <Button
diff --git a/client/src/components/map/TabsPane/TabsPane.tsx b/client/src/components/map/TabsPane/TabsPane.tsx
index f96c7e8..3f9efdf 100644
--- a/client/src/components/map/TabsPane/TabsPane.tsx
+++ b/client/src/components/map/TabsPane/TabsPane.tsx
@@ -1,4 +1,4 @@
-import { Tab, TabList } from '@fluentui/react-components';
+import { Tab, TabList, Text } from '@fluentui/react-components';
 import { useState } from 'react';
 
 export interface ITabsPane {
@@ -36,7 +36,9 @@ const TabsPane = ({
             }}>
                 <TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
                     {tabs.map((tab) => (
-                        <Tab key={tab.value} value={tab.value}>{tab.title}</Tab>
+                        <Tab key={tab.value} value={tab.value}>
+                            <Text size={200}>{tab.title}</Text>
+                        </Tab>
                     ))}
                 </TabList>
             </div>