fix(ui): refine paint process and sidebar controls

Group process-control layout cleanup with annotation sidebar alignment and panel tab width fixes.

Author: PaulHax

package-lock.json

@@ -92,7 +92,7 @@
     "ts-node": "^10.9.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.32.1",
-    "vite": "^7.3.6",
+    "vite": "^8.1.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-vuetify": "^2.1.2",

package.json

@@ -54,10 +54,9 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-y-auto mx-2 fill-height">
+  <div>
     <tool-controls />
-    <v-divider thickness="4" />
-    <v-tabs v-model="tab" align-tabs="center" density="compact" class="my-1">
+    <v-tabs v-model="tab" density="compact" grow class="annotation-tabs my-1">
       <v-tab value="segmentGroups" class="tab-header">Segment Groups</v-tab>
       <v-tab value="measurements" class="tab-header">Measurements</v-tab>
     </v-tabs>
@@ -73,6 +72,11 @@ watch(
 </template>
 
 <style scoped>
+.annotation-tabs :deep(.v-tab.v-tab) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
 .tab-header {
   font-size: 0.8rem;
 }

src/components/AnnotationsModule.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div id="data-module" class="mx-1 fill-height">
+  <div id="data-module">
     <div id="data-panels">
       <v-expansion-panels
         v-model="panels"
@@ -209,7 +209,6 @@ export default defineComponent({
 
 #data-panels {
   flex: 2;
-  overflow-y: auto;
 }
 
 .collection-header-icon {

src/components/DataBrowser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title> Interpolate segmentation between slices. </template>
       <ul>

src/components/FillBetweenParameterControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title
         >Fill enclosed holes in the segmentation on the axis of the selected
@@ -22,11 +22,11 @@
   <div
     v-for="scope in scopes"
     :key="scope.label"
-    class="w-100 px-4 mb-4 d-flex flex-column align-center"
+    class="w-100 mb-4 d-flex flex-column align-start"
   >
-    <div class="text-caption mb-1">{{ scope.label }}</div>
     <v-btn-toggle
       :model-value="scope.value"
+      :aria-label="scope.label"
       density="compact"
       variant="outlined"
       divided

src/components/FillHolesParameterControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title>Gaussian smooth selected segment.</template>
       <ul>
@@ -17,7 +17,6 @@
 
   <div class="w-100 mb-4">
     <v-slider
-      class="mx-4"
       label="Smoothing Strength (σ)"
       :min="MIN_SIGMA"
       :max="MAX_SIGMA"

src/components/GaussianSmoothParameterControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-100 mb-4">
     <div class="d-flex align-center justify-space-between">
       <div class="d-flex">
         <slot name="title"> </slot>

src/components/MiniExpansionPanel.vue

@@ -4,6 +4,7 @@
       <v-tabs
         id="module-switcher-tabs"
         v-model="selectedModuleIndex"
+        grow
         icons-and-text
         show-arrows
       >
@@ -21,11 +22,11 @@
       </v-tabs>
     </div>
     <div id="module-container">
-      <v-window v-model="selectedModuleIndex" touchless class="fill-height">
+      <v-window v-model="selectedModuleIndex" touchless class="module-window">
         <v-window-item
           v-for="mod in modules"
           :key="mod.name"
-          class="fill-height"
+          class="module-window-item"
         >
           <component
             :key="mod.name"
@@ -148,8 +149,14 @@ export default defineComponent({
 #module-container {
   position: relative;
   flex: 2;
-  overflow: auto;
-  scrollbar-gutter: stable;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.module-window,
+.module-window-item {
+  min-height: 100%;
 }
 
 .module-text {
@@ -165,8 +172,9 @@ export default defineComponent({
   align-items: center;
 }
 
-#module-switcher-tabs :deep(.v-slide-group__content) {
-  justify-content: center;
+#module-switcher-tabs :deep(.v-tab.v-tab) {
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 #module-switcher-tabs