fix big content

src/components/IssueContent.vue

@@ -34,16 +34,19 @@ const cancel = () => {
         <v-sheet
           v-bind="props"
           :class="isHovering ? 'px-0' : 'px-0'"
-          class="py-1 cursor-pointer content-sheet"
+          class="cursor-pointer d-flex ga-1"
           @click="startEdit"
         >
-          {{ text ?? 'click to add content' }}
+          <div class="content-sheet">
+            {{ text ?? 'click to add content' }}
+          </div>
+          <v-icon v-if="isHovering" icon="mdi-pencil" size="small" />
         </v-sheet>
       </v-hover>
     </template>
 
     <template v-else>
-      <v-textarea autofocus class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" />
+      <v-textarea autofocus class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" max-rows="15" />
 
       <div class="d-flex justify-end ga-1">
         <v-btn density="compact" prepend-icon="mdi-cancel" variant="text" text="Cancel" @click="cancel" />

src/components/IssueDetails.vue

@@ -100,7 +100,7 @@ defineExpose({
 
 <template>
   <div v-if="issue" class="pa-4 details">
-    <div class="d-flex flex-column ga-4">
+    <div class="d-flex flex-column ga-4 details__main">
       <div>{{ ckey }}</div>
 
       <issue-title :text="issue.title" @changed="onTitleChanged" />
@@ -124,7 +124,7 @@ defineExpose({
         </v-card-text>
       </v-card>
 
-      <expansion-panel title="Details">
+      <expansion-panel title="Details" class="details__content">
         <issue-content :text="issue.content" @changed="onContentChanged" />
       </expansion-panel>
     </div>
@@ -164,6 +164,20 @@ defineExpose({
   overflow-y: auto;
 }
 
+// Children keep their content height; only the Details panel shrinks to the space left and scrolls
+.details__main > * {
+  flex-shrink: 0;
+}
+
+.details__content {
+  flex-shrink: 1;
+  min-height: 0;
+
+  :deep(.panel__body) {
+    overflow-y: auto;
+  }
+}
+
 .activity {
   flex: 1;
   min-height: 0;

src/components/IssueTitle.vue

@@ -34,12 +34,13 @@ const cancel = () => {
         <v-sheet
           v-bind="props"
           :class="isHovering ? 'px-0' : 'px-0'"
-          class="py-1 cursor-pointer title-sheet"
+          class="cursor-pointer d-flex align-center ga-1"
           @click="startEdit"
         >
           <div class="text-uppercase text-title-large">
             {{ text ?? 'click to write text' }}
           </div>
+          <v-icon v-if="isHovering" icon="mdi-pencil" size="small" />
         </v-sheet>
       </v-hover>
     </template>
@@ -60,7 +61,7 @@ const cancel = () => {
 //  background-color: rgba(var(--v-theme-on-surface), 0.06);
 //}
 
-.v-sheet {
-  transition: padding 0.2s ease-in-out;
-}
+//.v-sheet {
+//  transition: padding 0.2s ease-in-out;
+//}
 </style>