fix: added resizer in side panel

frontend/src/components/Resizer.vue

@@ -2,8 +2,12 @@
   <div class="relative" :style="{ width: `${sidebarWidth}px` }">
     <slot v-bind="{ sidebarResizing, sidebarWidth }" />
     <div
-      class="absolute left-0 z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100"
-      :class="{ 'opacity-100': sidebarResizing }"
+      class="absolute z-10 h-full w-1 cursor-col-resize bg-gray-300 opacity-0 transition-opacity hover:opacity-100"
+      :class="{
+        'opacity-100': sidebarResizing,
+        'left-0': side == 'right',
+        'right-0': side == 'left',
+      }"
       @mousedown="startResize"
     />
   </div>
@@ -81,6 +85,6 @@ function resize(e) {
 function distance() {
   if (!props.parent) return 0
   const rect = props.parent.getBoundingClientRect()
-  return window.innerWidth - rect[props.side]
+  return rect[props.side]
 }
 </script>

frontend/src/pages/Contact.vue

@@ -8,10 +8,11 @@
       </Breadcrumbs>
     </template>
   </LayoutHeader>
-  <div class="flex h-full">
-    <div
+  <div ref="parentRef" class="flex h-full">
+    <Resizer
       v-if="contact.data"
-      class="flex h-full flex-col overflow-hidden border-r min-w-[352px]"
+      :parent="$refs.parentRef"
+      class="flex h-full flex-col overflow-hidden border-r"
     >
       <div class="border-b">
         <FileUploader
@@ -148,7 +149,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </Resizer>
     <Tabs class="overflow-hidden" v-model="tabIndex" :tabs="tabs">
       <template #tab="{ tab, selected }">
         <button
@@ -203,6 +204,7 @@
 </template>
 
 <script setup>
+import Resizer from '@/components/Resizer.vue'
 import Icon from '@/components/Icon.vue'
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'