dynamic width

src/components/IssueDetails.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, useTemplateRef, watchEffect } from 'vue'
 import { useIssueStore } from '@/stores/issue.js'
 import ExpansionPanel from '@/components/ExpansionPanel.vue'
 import IssueContent from '@/components/IssueContent.vue'
@@ -11,6 +11,8 @@ import IssueTitle from '@/components/IssueTitle.vue'
 import IssueDate from '@/components/IssueDate.vue'
 import CommentsList from '@/components/CommentsList.vue'
 import HistoryList from '@/components/HistoryList.vue'
+import SplitHandle from '@/components/SplitHandle.vue'
+import { useSplitPane } from '@/composables/useSplitPane.ts'
 
 interface Props {
   ckey: string
@@ -29,6 +31,9 @@ const activity = ref()
 
 const { ckey } = defineProps<Props>()
 
+const splitContainer = useTemplateRef<HTMLElement>('splitContainer')
+const { gridTemplate, handleProps } = useSplitPane(splitContainer, { storageKey: 'issue-details' })
+
 const createdAtFormatted = computed(() => {
   if (!issue.value?.createdAt) return ''
   return new Date(issue.value.createdAt).toLocaleString('ru-RU')
@@ -99,7 +104,7 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="issue" class="pa-4 details">
+  <div v-if="issue" ref="splitContainer" class="pa-4 details">
     <div class="d-flex flex-column ga-4 details__main">
       <div>{{ ckey }}</div>
 
@@ -128,6 +133,7 @@ defineExpose({
         <issue-content :text="issue.content" @changed="onContentChanged" />
       </expansion-panel>
     </div>
+    <split-handle v-bind="handleProps" />
     <div class="d-flex flex-column">
       <expansion-panel title="Activity" class="activity">
         <v-sheet class="activity__sheet">
@@ -155,8 +161,8 @@ defineExpose({
   flex: 1;
   min-height: 0;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  grid-template-columns: v-bind(gridTemplate);
+  column-gap: 0.5rem;
 }
 
 .details > * {