From eb18b33cd61aa453531926e6ad0bef562c69b348 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 28 May 2026 15:40:22 +0200
Subject: [PATCH 1/8] feat(constext-menu): compact items in context-menu

---
 app/components/Basic/Slider.vue               |   2 +-
 app/components/Basic/Switch.vue               |  10 +-
 .../Viewer/ContextMenu/ContextMenuItem.vue    |   6 +-
 .../EdgedCurve/SpecificEdgesOptions.vue       |  32 ++--
 .../Viewer/Generic/Mesh/EdgesOptions.vue      |  20 +--
 .../Viewer/Generic/Mesh/PointsOptions.vue     |  28 ++--
 .../Viewer/Generic/Model/BlocksOptions.vue    |  72 ++++----
 .../Viewer/Generic/Model/CornersOptions.vue   |  60 +++----
 .../Viewer/Generic/Model/LinesOptions.vue     |  72 ++++----
 .../Viewer/Generic/Model/ModelStyleCard.vue   |   4 +-
 .../Viewer/Generic/Model/PointsOptions.vue    |   6 +-
 .../Viewer/Generic/Model/SurfacesOptions.vue  |  72 ++++----
 .../Viewer/Options/AttributeColorBar.vue      |   6 +-
 .../Viewer/Options/AttributeSelector.vue      |   1 +
 app/components/Viewer/Options/ColorPicker.vue |  41 ++++-
 .../Viewer/Options/ColoringTypeSelector.vue   | 158 +++++++++---------
 .../Viewer/Options/OptionsSection.vue         |  14 +-
 .../Viewer/Options/Sliders/Slider.vue         |  14 +-
 app/components/Viewer/Options/TextureItem.vue |   3 +-
 .../Viewer/Options/VisibilitySwitch.vue       |   8 +-
 .../stores/data_style/model/blocks/color.js   |   4 +-
 .../stores/data_style/model/corners/color.js  |   4 +-
 .../stores/data_style/model/lines/color.js    |   4 +-
 .../stores/data_style/model/surfaces/color.js |   4 +-
 24 files changed, 317 insertions(+), 328 deletions(-)

diff --git a/app/components/Basic/Slider.vue b/app/components/Basic/Slider.vue
index 36b5880f6..582ded051 100644
--- a/app/components/Basic/Slider.vue
+++ b/app/components/Basic/Slider.vue
@@ -3,5 +3,5 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-slider v-model="model" hide-details min="0" max="20" step="2" />
+  <v-slider v-model="model" hide-details min="0" max="20" step="2" density="compact" />
 </template>
diff --git a/app/components/Basic/Switch.vue b/app/components/Basic/Switch.vue
index a0f0b70e0..c6cc217e2 100644
--- a/app/components/Basic/Switch.vue
+++ b/app/components/Basic/Switch.vue
@@ -3,5 +3,13 @@ const model = defineModel();
 </script>
 
 <template>
-  <v-switch v-model="model" inset hide-details />
+  <v-switch v-model="model" inset hide-details density="compact" class="compact-switch" />
 </template>
+
+<style scoped>
+.compact-switch {
+  transform: scale(0.75);
+  transform-origin: left center;
+  width: 40px;
+}
+</style>
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 532c0d08c..a6ea1dec0 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -5,7 +5,7 @@ import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const CARD_WIDTH = 320;
+const CARD_WIDTH = 300;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
 const RADIUS = 80;
@@ -170,8 +170,8 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-title class="text-subtitle-1 pt-3 pb-1 px-3 font-weight-bold">{{ tooltip }}</v-card-title>
+        <v-card-text class="pa-3" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index 793e47738..ffadce2ee 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -119,25 +119,19 @@ const edge_attribute_color_map = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider v-model="width" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              v-model:edge_attribute_name="edge_attribute_name"
-              v-model:edge_attribute_range="edge_attribute_range"
-              v-model:edge_attribute_color_map="edge_attribute_color_map"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider v-model="width" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_range="edge_attribute_range"
+          v-model:edge_attribute_color_map="edge_attribute_color_map"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 0272ccd03..602dabe6c 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -68,19 +68,13 @@ const color = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 5f3154838..3fb75c4e5 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -98,23 +98,17 @@ const vertex_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              :capabilities="{ vertex: { available: false } }"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          :capabilities="{ vertex: { available: false } }"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 602cb6258..fb0daa9d2 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -207,50 +207,42 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 
 <template>
   <div>
-    <OptionsSection title="Blocks Options" class="mt-6">
+    <OptionsSection title="Blocks Options" class="mt-4">
       <VisibilitySwitch v-model="blocksVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetBlockIds[0]"
-            v-model:coloring_style_key="blocksColorMode"
-            v-model:color="blocksColor"
-            v-model:vertex_attribute_name="blocksVertexAttributeName"
-            v-model:vertex_attribute_range="blocksVertexAttributeRange"
-            v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
-            v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
-            v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
-            v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="targetBlockIds[0]"
+        v-model:coloring_style_key="blocksColorMode"
+        v-model:color="blocksColor"
+        v-model:vertex_attribute_name="blocksVertexAttributeName"
+        v-model:vertex_attribute_range="blocksVertexAttributeRange"
+        v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
+        v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+        v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
+        v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
 
-    <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
+    <OptionsSection v-if="blockId" title="Component Options" class="mt-4">
       <VisibilitySwitch v-model="blockVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="blockId"
-            v-model:coloring_style_key="blockColorMode"
-            v-model:color="blockColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            v-model:polyhedron_attribute_name="polyhedronAttributeName"
-            v-model:polyhedron_attribute_range="polyhedronAttributeRange"
-            v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="blockId"
+        v-model:coloring_style_key="blockColorMode"
+        v-model:color="blockColor"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:polyhedron_attribute_name="polyhedronAttributeName"
+        v-model:polyhedron_attribute_range="polyhedronAttributeRange"
+        v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
   </div>
 </template>
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 6498fe145..1526b1aba 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -144,44 +144,36 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 
 <template>
   <div>
-    <OptionsSection title="Corners Options" class="mt-6">
+    <OptionsSection title="Corners Options" class="mt-4">
       <VisibilitySwitch v-model="cornersVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetCornerIds[0]"
-            v-model:coloring_style_key="cornersColorMode"
-            v-model:color="cornersColor"
-            v-model:vertex_attribute_name="cornersVertexAttributeName"
-            v-model:vertex_attribute_range="cornersVertexAttributeRange"
-            v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="targetCornerIds[0]"
+        v-model:coloring_style_key="cornersColorMode"
+        v-model:color="cornersColor"
+        v-model:vertex_attribute_name="cornersVertexAttributeName"
+        v-model:vertex_attribute_range="cornersVertexAttributeRange"
+        v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
 
-    <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
+    <OptionsSection v-if="cornerId" title="Component Options" class="mt-4">
       <VisibilitySwitch v-model="cornerVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="cornerId"
-            v-model:coloring_style_key="cornerColorMode"
-            v-model:color="cornerColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="cornerId"
+        v-model:coloring_style_key="cornerColorMode"
+        v-model:color="cornerColor"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
   </div>
 </template>
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index aad7fc031..ed6c6cbdf 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -203,50 +203,42 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 
 <template>
   <div>
-    <OptionsSection title="Lines Options" class="mt-6">
+    <OptionsSection title="Lines Options" class="mt-4">
       <VisibilitySwitch v-model="linesVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetLineIds[0]"
-            v-model:coloring_style_key="linesColorMode"
-            v-model:color="linesColor"
-            v-model:vertex_attribute_name="linesVertexAttributeName"
-            v-model:vertex_attribute_range="linesVertexAttributeRange"
-            v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
-            v-model:edge_attribute_name="linesEdgeAttributeName"
-            v-model:edge_attribute_range="linesEdgeAttributeRange"
-            v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="targetLineIds[0]"
+        v-model:coloring_style_key="linesColorMode"
+        v-model:color="linesColor"
+        v-model:vertex_attribute_name="linesVertexAttributeName"
+        v-model:vertex_attribute_range="linesVertexAttributeRange"
+        v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
+        v-model:edge_attribute_name="linesEdgeAttributeName"
+        v-model:edge_attribute_range="linesEdgeAttributeRange"
+        v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
 
-    <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
+    <OptionsSection v-if="lineId" title="Component Options" class="mt-4">
       <VisibilitySwitch v-model="lineVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="lineId"
-            v-model:coloring_style_key="lineColorMode"
-            v-model:color="lineColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            v-model:edge_attribute_name="edgeAttributeName"
-            v-model:edge_attribute_range="edgeAttributeRange"
-            v-model:edge_attribute_color_map="edgeAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="lineId"
+        v-model:coloring_style_key="lineColorMode"
+        v-model:color="lineColor"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:edge_attribute_name="edgeAttributeName"
+        v-model:edge_attribute_range="edgeAttributeRange"
+        v-model:edge_attribute_color_map="edgeAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
   </div>
 </template>
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index ee5a0c0ab..27e71b8f5 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -132,8 +132,8 @@ watch(modelComponentsColorMode, async (colorMode) => {
       <VisibilitySwitch v-model="modelVisibility" />
     </OptionsSection>
 
-    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-6">
-      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
+    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
+      <v-label class="text-caption mb-1 mt-1">Color Mode</v-label>
       <v-select
         v-model="modelComponentsColorMode"
         :items="colorModes"
diff --git a/app/components/Viewer/Generic/Model/PointsOptions.vue b/app/components/Viewer/Generic/Model/PointsOptions.vue
index 9741248ea..1dcfd838a 100644
--- a/app/components/Viewer/Generic/Model/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Model/PointsOptions.vue
@@ -51,10 +51,8 @@ const size = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
       </template>
     </template>
   </ViewerContextMenuItem>
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index cf5f32dfa..032d3d196 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -211,50 +211,42 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 
 <template>
   <div>
-    <OptionsSection title="Surfaces Options" class="mt-6">
+    <OptionsSection title="Surfaces Options" class="mt-4">
       <VisibilitySwitch v-model="surfacesVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="targetSurfaceIds[0]"
-            v-model:coloring_style_key="surfacesColorMode"
-            v-model:color="surfacesColor"
-            v-model:vertex_attribute_name="surfacesVertexAttributeName"
-            v-model:vertex_attribute_range="surfacesVertexAttributeRange"
-            v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
-            v-model:polygon_attribute_name="surfacesPolygonAttributeName"
-            v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
-            v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="targetSurfaceIds[0]"
+        v-model:coloring_style_key="surfacesColorMode"
+        v-model:color="surfacesColor"
+        v-model:vertex_attribute_name="surfacesVertexAttributeName"
+        v-model:vertex_attribute_range="surfacesVertexAttributeRange"
+        v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
+        v-model:polygon_attribute_name="surfacesPolygonAttributeName"
+        v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
+        v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
 
-    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
+    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-4">
       <VisibilitySwitch v-model="surfaceVisibility" />
-      <v-row class="mt-2 pa-0">
-        <v-col class="pa-0">
-          <ViewerOptionsColoringTypeSelector
-            :id="modelId"
-            :componentId="surfaceId"
-            v-model:coloring_style_key="surfaceColorMode"
-            v-model:color="surfaceColor"
-            v-model:vertex_attribute_name="vertexAttributeName"
-            v-model:vertex_attribute_range="vertexAttributeRange"
-            v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-            v-model:polygon_attribute_name="polygonAttributeName"
-            v-model:polygon_attribute_range="polygonAttributeRange"
-            v-model:polygon_attribute_color_map="polygonAttributeColorMap"
-            :capabilities="capabilities"
-            :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-            :allowRandom="true"
-          />
-        </v-col>
-      </v-row>
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        :componentId="surfaceId"
+        v-model:coloring_style_key="surfaceColorMode"
+        v-model:color="surfaceColor"
+        v-model:vertex_attribute_name="vertexAttributeName"
+        v-model:vertex_attribute_range="vertexAttributeRange"
+        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+        v-model:polygon_attribute_name="polygonAttributeName"
+        v-model:polygon_attribute_range="polygonAttributeRange"
+        v-model:polygon_attribute_color_map="polygonAttributeColorMap"
+        :capabilities="capabilities"
+        :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+        :allowRandom="true"
+      />
     </OptionsSection>
   </div>
 </template>
diff --git a/app/components/Viewer/Options/AttributeColorBar.vue b/app/components/Viewer/Options/AttributeColorBar.vue
index f01090268..e78d2701d 100644
--- a/app/components/Viewer/Options/AttributeColorBar.vue
+++ b/app/components/Viewer/Options/AttributeColorBar.vue
@@ -11,8 +11,8 @@ const colorMap = defineModel("colorMap", { type: String });
 <template>
   <div class="attribute-colorbar mt-3">
     <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
-    <v-row dense align="center" class="mt-2">
-      <v-col cols="5">
+    <v-row dense align="center" class="mt-2" no-gutters>
+      <v-col cols="5" class="pe-1">
         <v-text-field
           :model-value="minimum"
           @update:model-value="(value) => (minimum = Number(value))"
@@ -33,7 +33,7 @@ const colorMap = defineModel("colorMap", { type: String });
           v-tooltip="'Reset range'"
         />
       </v-col>
-      <v-col cols="5">
+      <v-col cols="5" class="ps-1">
         <v-text-field
           :model-value="maximum"
           @update:model-value="(value) => (maximum = Number(value))"
diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index ff672eb92..3aceb08d8 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -109,6 +109,7 @@ watch(name, (newName, oldName) => {
     item-value="attribute_name"
     density="compact"
     label="Select an attribute"
+    hide-details
   />
   <ViewerOptionsAttributeColorBar
     v-if="name"
diff --git a/app/components/Viewer/Options/ColorPicker.vue b/app/components/Viewer/Options/ColorPicker.vue
index 076cf1428..9b3e61b5e 100644
--- a/app/components/Viewer/Options/ColorPicker.vue
+++ b/app/components/Viewer/Options/ColorPicker.vue
@@ -37,13 +37,36 @@ watch(pressed, (value) => {
 </script>
 
 <template>
-  <v-color-picker
-    ref="colorPickerRef"
-    v-model="vuetifyColor"
-    flat
-    canvas-height="100"
-    hide-inputs
-    width="100%"
-    mode="rgba"
-  />
+  <div class="color-picker-container">
+    <v-color-picker
+      ref="colorPickerRef"
+      v-model="vuetifyColor"
+      flat
+      canvas-height="75"
+      hide-inputs
+      width="220"
+      mode="rgba"
+    />
+  </div>
 </template>
+
+<style scoped>
+.color-picker-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+:deep(.v-color-picker__controls) {
+  padding: 8px !important;
+}
+
+:deep(.v-color-picker__dot) {
+  width: 18px !important;
+  height: 18px !important;
+}
+
+:deep(.v-color-picker__preview) {
+  margin-bottom: 0 !important;
+}
+</style>
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 3a48596fd..c4f3620ef 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -161,85 +161,83 @@ watch(
 );
 </script>
 <template>
-  <v-row justify="center" align="center">
-    <v-divider />
-    <v-col>
-      <v-row justify="center" align="center">
-        <v-col cols="auto">
-          <v-icon size="30" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
-        </v-col>
-        <v-col>
-          <v-select
-            v-model="coloring_style_label"
-            :items="coloring_styles.labels"
-            label="Select a coloring style"
-            density="compact"
+  <div class="px-2">
+    <v-divider class="my-2" />
+    <v-row justify="center" align="center" no-gutters>
+      <v-col cols="auto" class="mr-2">
+        <v-icon size="18" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
+      </v-col>
+      <v-col>
+        <v-select
+          v-model="coloring_style_label"
+          :items="coloring_styles.labels"
+          label="Select a coloring style"
+          density="compact"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+    <v-row class="mt-3" no-gutters>
+      <v-col cols="12" class="ps-7 pe-1">
+        <template v-if="coloring_style_key === color_dict['value']">
+          <ViewerOptionsColorPicker v-model="color" />
+        </template>
+        <template v-if="coloring_style_key === textures_dict['value']">
+          <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
+        </template>
+        <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+          <ViewerOptionsAttributeSelector
+            v-model:name="vertex_attribute_name"
+            v-model:range="vertex_attribute_range"
+            v-model:colorMap="vertex_attribute_color_map"
+            :id="id"
+            :componentId="componentId"
+            :schema="vertexSchema"
           />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-spacer />
-        <v-col cols="10">
-          <template v-if="coloring_style_key === color_dict['value']">
-            <ViewerOptionsColorPicker v-model="color" />
-          </template>
-          <template v-if="coloring_style_key === textures_dict['value']">
-            <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
-          </template>
-          <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="vertex_attribute_name"
-              v-model:range="vertex_attribute_range"
-              v-model:colorMap="vertex_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="vertexSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="edge_attribute_name"
-              v-model:range="edge_attribute_range"
-              v-model:colorMap="edge_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="edgeSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="cell_attribute_name"
-              v-model:range="cell_attribute_range"
-              v-model:colorMap="cell_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="cellSchema"
-            />
-          </template>
-          <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
-            <ViewerOptionsAttributeSelector
-              v-model:name="polygon_attribute_name"
-              v-model:range="polygon_attribute_range"
-              v-model:colorMap="polygon_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polygonSchema"
-            />
-          </template>
-          <template
-            v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
-          >
-            <ViewerOptionsAttributeSelector
-              v-model:name="polyhedron_attribute_name"
-              v-model:range="polyhedron_attribute_range"
-              v-model:colorMap="polyhedron_attribute_color_map"
-              :id="id"
-              :componentId="componentId"
-              :schema="polyhedronSchema"
-            />
-          </template>
-        </v-col>
-      </v-row>
-    </v-col>
-  </v-row>
+        </template>
+        <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+          <ViewerOptionsAttributeSelector
+            v-model:name="edge_attribute_name"
+            v-model:range="edge_attribute_range"
+            v-model:colorMap="edge_attribute_color_map"
+            :id="id"
+            :componentId="componentId"
+            :schema="edgeSchema"
+          />
+        </template>
+        <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+          <ViewerOptionsAttributeSelector
+            v-model:name="cell_attribute_name"
+            v-model:range="cell_attribute_range"
+            v-model:colorMap="cell_attribute_color_map"
+            :id="id"
+            :componentId="componentId"
+            :schema="cellSchema"
+          />
+        </template>
+        <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+          <ViewerOptionsAttributeSelector
+            v-model:name="polygon_attribute_name"
+            v-model:range="polygon_attribute_range"
+            v-model:colorMap="polygon_attribute_color_map"
+            :id="id"
+            :componentId="componentId"
+            :schema="polygonSchema"
+          />
+        </template>
+        <template
+          v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
+        >
+          <ViewerOptionsAttributeSelector
+            v-model:name="polyhedron_attribute_name"
+            v-model:range="polyhedron_attribute_range"
+            v-model:colorMap="polyhedron_attribute_color_map"
+            :id="id"
+            :componentId="componentId"
+            :schema="polyhedronSchema"
+          />
+        </template>
+      </v-col>
+    </v-row>
+  </div>
 </template>
diff --git a/app/components/Viewer/Options/OptionsSection.vue b/app/components/Viewer/Options/OptionsSection.vue
index 094b7e985..8bbf4ff43 100644
--- a/app/components/Viewer/Options/OptionsSection.vue
+++ b/app/components/Viewer/Options/OptionsSection.vue
@@ -14,7 +14,7 @@ const isCollapsed = ref(false);
         mdi-chevron-down
       </v-icon>
     </div>
-    <v-container v-show="!isCollapsed" class="pa-2">
+    <v-container v-show="!isCollapsed" class="pa-0 pt-1 pb-1">
       <slot />
     </v-container>
   </div>
@@ -24,18 +24,18 @@ const isCollapsed = ref(false);
 .options-section {
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 12px;
-  padding: 12px 8px 8px 8px;
+  border-radius: 8px;
+  padding: 12px 8px 12px 8px;
 }
 
 .section-badge {
   position: absolute;
-  top: -12px;
-  left: 16px;
+  top: -10px;
+  left: 12px;
   background-color: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(8px);
-  padding: 2px 12px;
-  font-size: 0.7rem;
+  padding: 1px 8px;
+  font-size: 0.65rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
diff --git a/app/components/Viewer/Options/Sliders/Slider.vue b/app/components/Viewer/Options/Sliders/Slider.vue
index 6dc571b54..401fe6029 100644
--- a/app/components/Viewer/Options/Sliders/Slider.vue
+++ b/app/components/Viewer/Options/Sliders/Slider.vue
@@ -8,10 +8,12 @@ const { tooltip } = defineProps({
 </script>
 
 <template>
-  <v-col cols="auto" justify="center">
-    <v-icon size="30" icon="mdi-ruler" v-tooltip:left="tooltip" />
-  </v-col>
-  <v-col justify="center">
-    <BasicSlider v-model="model" />
-  </v-col>
+  <v-row align="center" no-gutters class="px-2">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-ruler" v-tooltip:left="tooltip" />
+    </v-col>
+    <v-col>
+      <BasicSlider v-model="model" />
+    </v-col>
+  </v-row>
 </template>
diff --git a/app/components/Viewer/Options/TextureItem.vue b/app/components/Viewer/Options/TextureItem.vue
index efd0488fb..3d8f12a1a 100644
--- a/app/components/Viewer/Options/TextureItem.vue
+++ b/app/components/Viewer/Options/TextureItem.vue
@@ -71,12 +71,13 @@ watch(texture_id, (value) => {
 </style>
 
 <template>
-  <v-col cols="7" class="pa-1 ml-3">
+  <v-col cols="8" class="pa-1">
     <v-select
       v-model="texture_name"
       :items="texture_coordinates"
       label="Select a texture"
       density="compact"
+      hide-details
     />
   </v-col>
   <v-badge
diff --git a/app/components/Viewer/Options/VisibilitySwitch.vue b/app/components/Viewer/Options/VisibilitySwitch.vue
index 651364e98..894ad1821 100644
--- a/app/components/Viewer/Options/VisibilitySwitch.vue
+++ b/app/components/Viewer/Options/VisibilitySwitch.vue
@@ -5,11 +5,11 @@ const visibility = defineModel();
 </script>
 
 <template>
-  <v-row class="pa-0" align="center">
-    <v-col cols="auto" justify="center">
-      <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
+  <v-row class="pa-0 px-2" align="center" no-gutters>
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-eye" v-tooltip:left="'Visibility'" />
     </v-col>
-    <v-col cols="auto" justify="center">
+    <v-col cols="auto">
       <BasicSwitch v-model="visibility" />
     </v-col>
   </v-row>
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 266a7031c..f48359988 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -1,5 +1,6 @@
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
@@ -22,7 +23,8 @@ export function useModelBlocksColor() {
   }
 
   function setModelBlockColorMode(modelId, block_id, color_mode) {
-    return modelCommonStyle.setModelComponentColorMode(modelId, block_id, color_mode);
+    const dataStyleStore = useDataStyleStore();
+    return dataStyleStore.setModelComponentColorMode(modelId, block_id, color_mode);
   }
 
   return { setModelBlocksColor, modelBlockColor, modelBlockColorMode, setModelBlockColorMode };
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 45fa375de..e174306de 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -1,5 +1,6 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
@@ -22,7 +23,8 @@ export function useModelCornersColor() {
   }
 
   function setModelCornerColorMode(modelId, corner_id, color_mode) {
-    return modelCommonStyle.setModelComponentColorMode(modelId, corner_id, color_mode);
+    const dataStyleStore = useDataStyleStore();
+    return dataStyleStore.setModelComponentColorMode(modelId, corner_id, color_mode);
   }
 
   return { setModelCornersColor, modelCornerColor, modelCornerColorMode, setModelCornerColorMode };
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 362edf8c5..54688d20b 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -1,5 +1,6 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
@@ -22,7 +23,8 @@ export function useModelLinesColor() {
   }
 
   function setModelLineColorMode(modelId, line_id, color_mode) {
-    return modelCommonStyle.setModelComponentColorMode(modelId, line_id, color_mode);
+    const dataStyleStore = useDataStyleStore();
+    return dataStyleStore.setModelComponentColorMode(modelId, line_id, color_mode);
   }
 
   return { setModelLinesColor, modelLineColor, modelLineColorMode, setModelLineColorMode };
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index f1ec82a94..74fe75f17 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -1,5 +1,6 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
@@ -23,7 +24,8 @@ export function useModelSurfacesColor() {
   }
 
   function setModelSurfaceColorMode(modelId, surface_id, color_mode) {
-    return modelCommonStyle.setModelComponentColorMode(modelId, surface_id, color_mode);
+    const dataStyleStore = useDataStyleStore();
+    return dataStyleStore.setModelComponentColorMode(modelId, surface_id, color_mode);
   }
 
   return {

From 8ffa1dc25333bf1d8c42e036731a4e3085a66a37 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 28 May 2026 13:43:05 +0000
Subject: [PATCH 2/8] Apply prepare changes

---
 app/components/Viewer/ContextMenu/ContextMenuItem.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index a6ea1dec0..ac9daa9e8 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -170,7 +170,9 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-title class="text-subtitle-1 pt-3 pb-1 px-3 font-weight-bold">{{ tooltip }}</v-card-title>
+        <v-card-title class="text-subtitle-1 pt-3 pb-1 px-3 font-weight-bold">{{
+          tooltip
+        }}</v-card-title>
         <v-card-text class="pa-3" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>

From 53f9c496459d185c93a7a53171808c2776fd8d37 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 28 May 2026 16:01:41 +0200
Subject: [PATCH 3/8] revert some

---
 .../Viewer/Generic/Model/BlocksOptions.vue    |  4 +--
 .../Viewer/Generic/Model/CornersOptions.vue   |  4 +--
 .../Viewer/Generic/Model/LinesOptions.vue     |  4 +--
 .../Viewer/Generic/Model/ModelStyleCard.vue   |  4 +--
 .../Viewer/Generic/Model/SurfacesOptions.vue  |  4 +--
 app/components/Viewer/Options/ColorPicker.vue | 27 ++++++---------
 .../Viewer/PointSet/SpecificPointsOptions.vue | 33 +++++++------------
 7 files changed, 31 insertions(+), 49 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index fb0daa9d2..761f1b285 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -207,7 +207,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 
 <template>
   <div>
-    <OptionsSection title="Blocks Options" class="mt-4">
+    <OptionsSection title="Blocks Options" class="mt-6">
       <VisibilitySwitch v-model="blocksVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
@@ -226,7 +226,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       />
     </OptionsSection>
 
-    <OptionsSection v-if="blockId" title="Component Options" class="mt-4">
+    <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
       <VisibilitySwitch v-model="blockVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 1526b1aba..dc3b0c9cf 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -144,7 +144,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 
 <template>
   <div>
-    <OptionsSection title="Corners Options" class="mt-4">
+    <OptionsSection title="Corners Options" class="mt-6">
       <VisibilitySwitch v-model="cornersVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
@@ -160,7 +160,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       />
     </OptionsSection>
 
-    <OptionsSection v-if="cornerId" title="Component Options" class="mt-4">
+    <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
       <VisibilitySwitch v-model="cornerVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index ed6c6cbdf..c2599d7f6 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -203,7 +203,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 
 <template>
   <div>
-    <OptionsSection title="Lines Options" class="mt-4">
+    <OptionsSection title="Lines Options" class="mt-6">
       <VisibilitySwitch v-model="linesVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
@@ -222,7 +222,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       />
     </OptionsSection>
 
-    <OptionsSection v-if="lineId" title="Component Options" class="mt-4">
+    <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
       <VisibilitySwitch v-model="lineVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 27e71b8f5..ee5a0c0ab 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -132,8 +132,8 @@ watch(modelComponentsColorMode, async (colorMode) => {
       <VisibilitySwitch v-model="modelVisibility" />
     </OptionsSection>
 
-    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
-      <v-label class="text-caption mb-1 mt-1">Color Mode</v-label>
+    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-6">
+      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
       <v-select
         v-model="modelComponentsColorMode"
         :items="colorModes"
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index 032d3d196..7cc08a79b 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -211,7 +211,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 
 <template>
   <div>
-    <OptionsSection title="Surfaces Options" class="mt-4">
+    <OptionsSection title="Surfaces Options" class="mt-6">
       <VisibilitySwitch v-model="surfacesVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
@@ -230,7 +230,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       />
     </OptionsSection>
 
-    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-4">
+    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
       <VisibilitySwitch v-model="surfaceVisibility" />
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
diff --git a/app/components/Viewer/Options/ColorPicker.vue b/app/components/Viewer/Options/ColorPicker.vue
index 9b3e61b5e..a9ff26026 100644
--- a/app/components/Viewer/Options/ColorPicker.vue
+++ b/app/components/Viewer/Options/ColorPicker.vue
@@ -37,26 +37,19 @@ watch(pressed, (value) => {
 </script>
 
 <template>
-  <div class="color-picker-container">
-    <v-color-picker
-      ref="colorPickerRef"
-      v-model="vuetifyColor"
-      flat
-      canvas-height="75"
-      hide-inputs
-      width="220"
-      mode="rgba"
-    />
-  </div>
+  <v-color-picker
+    ref="colorPickerRef"
+    v-model="vuetifyColor"
+    flat
+    canvas-height="75"
+    hide-inputs
+    width="220"
+    mode="rgba"
+    class="mx-auto"
+  />
 </template>
 
 <style scoped>
-.color-picker-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
 :deep(.v-color-picker__controls) {
   padding: 8px !important;
 }
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index b316ff122..bbf119a15 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -95,28 +95,17 @@ const vertex_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
-        <v-row class="pa-0" align="center">
-          <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <ViewerOptionsColoringTypeSelector
-              :id="id"
-              v-model:coloring_style_key="coloring_style_key"
-              v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              :vertex_has_colormap="true"
-            />
-          </v-col>
-        </v-row>
+        <v-divider class="my-2" />
+        <ViewerOptionsSizeSlider v-model="size" />
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          :vertex_has_colormap="true"
+        />
       </template>
     </template>
   </ViewerContextMenuItem>

From 02df25dbeaba56423e8869599030c370ecddbd39 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 28 May 2026 16:30:15 +0200
Subject: [PATCH 4/8] rm unused imports

---
 internal/stores/data_style/model/blocks/color.js   | 1 -
 internal/stores/data_style/model/corners/color.js  | 1 -
 internal/stores/data_style/model/lines/color.js    | 1 -
 internal/stores/data_style/model/surfaces/color.js | 1 -
 4 files changed, 4 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 5f1674d8a..2710df04b 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -1,6 +1,5 @@
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index a9b925bb3..5df090d18 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -1,6 +1,5 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 8593a07c0..0873e74eb 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -1,6 +1,5 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index 3688b6b8b..ca14a0892 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -1,6 +1,5 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelSurfacesCommonStyle } from "./common";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;

From 1aff107cefc1465e525a18540af428a11b241d86 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 28 May 2026 16:52:36 +0200
Subject: [PATCH 5/8] reduce list for color modes

---
 .../Viewer/ContextMenu/ContextMenuItem.vue    | 36 +++++++++++++++++++
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 36 +++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index ac9daa9e8..74a36f720 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -254,4 +254,40 @@ function toggleOptions() {
 .options-left {
   right: 60px;
 }
+
+:deep(.v-field) {
+  min-height: 30px !important;
+  height: 30px !important;
+  border-radius: 6px !important;
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 30px !important;
+  height: 30px !important;
+  font-size: 0.95rem !important;
+  align-items: center;
+}
+
+:deep(.v-field__append-inner) {
+  align-items: center;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 30px !important;
+}
+
+:deep(.v-field__append-inner .v-icon) {
+  font-size: 16px !important;
+}
+
+:deep(.v-field-label) {
+  font-size: 0.75rem !important;
+  top: 6px !important;
+}
+
+:deep(.v-field-label--floating) {
+  top: -8px !important;
+  font-size: 0.7rem !important;
+}
 </style>
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index ee5a0c0ab..68026136c 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -181,4 +181,40 @@ watch(modelComponentsColorMode, async (colorMode) => {
   padding-top: 20px;
   overflow-x: hidden;
 }
+
+:deep(.v-field) {
+  min-height: 30px !important;
+  height: 30px !important;
+  border-radius: 6px !important;
+}
+
+:deep(.v-field__input) {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  min-height: 30px !important;
+  height: 30px !important;
+  font-size: 0.95rem !important;
+  align-items: center;
+}
+
+:deep(.v-field__append-inner) {
+  align-items: center;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 30px !important;
+}
+
+:deep(.v-field__append-inner .v-icon) {
+  font-size: 16px !important;
+}
+
+:deep(.v-field-label) {
+  font-size: 0.75rem !important;
+  top: 6px !important;
+}
+
+:deep(.v-field-label--floating) {
+  top: -8px !important;
+  font-size: 0.7rem !important;
+}
 </style>

From 0f8c2cce14be67f5b70b0374b059d986ec54aad8 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 28 May 2026 17:03:03 +0200
Subject: [PATCH 6/8] tests remove divs

---
 .../Viewer/Generic/Model/BlocksOptions.vue    |  76 +++++----
 .../Viewer/Generic/Model/CornersOptions.vue   |  64 ++++----
 .../Viewer/Generic/Model/LinesOptions.vue     |  76 +++++----
 .../Viewer/Generic/Model/SurfacesOptions.vue  |  76 +++++----
 .../Viewer/Options/ColoringTypeSelector.vue   | 154 +++++++++---------
 5 files changed, 218 insertions(+), 228 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index afec1bd89..1e90e6923 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -206,43 +206,41 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Blocks Options" class="mt-6">
-      <VisibilitySwitch v-model="blocksVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="targetBlockIds[0]"
-        v-model:coloring_style_key="blocksColorMode"
-        v-model:color="blocksColor"
-        v-model:vertex_attribute_name="blocksVertexAttributeName"
-        v-model:vertex_attribute_range="blocksVertexAttributeRange"
-        v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
-        v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
-        v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
-        v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-
-    <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="blockVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="blockId"
-        v-model:coloring_style_key="blockColorMode"
-        v-model:color="blockColor"
-        v-model:vertex_attribute_name="vertexAttributeName"
-        v-model:vertex_attribute_range="vertexAttributeRange"
-        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-        v-model:polyhedron_attribute_name="polyhedronAttributeName"
-        v-model:polyhedron_attribute_range="polyhedronAttributeRange"
-        v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Blocks Options" class="mt-6">
+    <VisibilitySwitch v-model="blocksVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetBlockIds[0]"
+      v-model:coloring_style_key="blocksColorMode"
+      v-model:color="blocksColor"
+      v-model:vertex_attribute_name="blocksVertexAttributeName"
+      v-model:vertex_attribute_range="blocksVertexAttributeRange"
+      v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
+      v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+      v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
+      v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
+    <VisibilitySwitch v-model="blockVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="blockId"
+      v-model:coloring_style_key="blockColorMode"
+      v-model:color="blockColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:polyhedron_attribute_name="polyhedronAttributeName"
+      v-model:polyhedron_attribute_range="polyhedronAttributeRange"
+      v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 1e5e45dbc..9998b5015 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -143,37 +143,35 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Corners Options" class="mt-6">
-      <VisibilitySwitch v-model="cornersVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="targetCornerIds[0]"
-        v-model:coloring_style_key="cornersColorMode"
-        v-model:color="cornersColor"
-        v-model:vertex_attribute_name="cornersVertexAttributeName"
-        v-model:vertex_attribute_range="cornersVertexAttributeRange"
-        v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-
-    <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="cornerVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="cornerId"
-        v-model:coloring_style_key="cornerColorMode"
-        v-model:color="cornerColor"
-        v-model:vertex_attribute_name="vertexAttributeName"
-        v-model:vertex_attribute_range="vertexAttributeRange"
-        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Corners Options" class="mt-6">
+    <VisibilitySwitch v-model="cornersVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetCornerIds[0]"
+      v-model:coloring_style_key="cornersColorMode"
+      v-model:color="cornersColor"
+      v-model:vertex_attribute_name="cornersVertexAttributeName"
+      v-model:vertex_attribute_range="cornersVertexAttributeRange"
+      v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
+    <VisibilitySwitch v-model="cornerVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="cornerId"
+      v-model:coloring_style_key="cornerColorMode"
+      v-model:color="cornerColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 0af46522d..f592d4208 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -202,43 +202,41 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Lines Options" class="mt-6">
-      <VisibilitySwitch v-model="linesVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="targetLineIds[0]"
-        v-model:coloring_style_key="linesColorMode"
-        v-model:color="linesColor"
-        v-model:vertex_attribute_name="linesVertexAttributeName"
-        v-model:vertex_attribute_range="linesVertexAttributeRange"
-        v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
-        v-model:edge_attribute_name="linesEdgeAttributeName"
-        v-model:edge_attribute_range="linesEdgeAttributeRange"
-        v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-
-    <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="lineVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="lineId"
-        v-model:coloring_style_key="lineColorMode"
-        v-model:color="lineColor"
-        v-model:vertex_attribute_name="vertexAttributeName"
-        v-model:vertex_attribute_range="vertexAttributeRange"
-        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-        v-model:edge_attribute_name="edgeAttributeName"
-        v-model:edge_attribute_range="edgeAttributeRange"
-        v-model:edge_attribute_color_map="edgeAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Lines Options" class="mt-6">
+    <VisibilitySwitch v-model="linesVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetLineIds[0]"
+      v-model:coloring_style_key="linesColorMode"
+      v-model:color="linesColor"
+      v-model:vertex_attribute_name="linesVertexAttributeName"
+      v-model:vertex_attribute_range="linesVertexAttributeRange"
+      v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
+      v-model:edge_attribute_name="linesEdgeAttributeName"
+      v-model:edge_attribute_range="linesEdgeAttributeRange"
+      v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
+    <VisibilitySwitch v-model="lineVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="lineId"
+      v-model:coloring_style_key="lineColorMode"
+      v-model:color="lineColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:edge_attribute_name="edgeAttributeName"
+      v-model:edge_attribute_range="edgeAttributeRange"
+      v-model:edge_attribute_color_map="edgeAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index f11f38659..4f06831b8 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -210,43 +210,41 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 </script>
 
 <template>
-  <div>
-    <OptionsSection title="Surfaces Options" class="mt-6">
-      <VisibilitySwitch v-model="surfacesVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="targetSurfaceIds[0]"
-        v-model:coloring_style_key="surfacesColorMode"
-        v-model:color="surfacesColor"
-        v-model:vertex_attribute_name="surfacesVertexAttributeName"
-        v-model:vertex_attribute_range="surfacesVertexAttributeRange"
-        v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
-        v-model:polygon_attribute_name="surfacesPolygonAttributeName"
-        v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
-        v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-
-    <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
-      <VisibilitySwitch v-model="surfaceVisibility" />
-      <ViewerOptionsColoringTypeSelector
-        :id="modelId"
-        :componentId="surfaceId"
-        v-model:coloring_style_key="surfaceColorMode"
-        v-model:color="surfaceColor"
-        v-model:vertex_attribute_name="vertexAttributeName"
-        v-model:vertex_attribute_range="vertexAttributeRange"
-        v-model:vertex_attribute_color_map="vertexAttributeColorMap"
-        v-model:polygon_attribute_name="polygonAttributeName"
-        v-model:polygon_attribute_range="polygonAttributeRange"
-        v-model:polygon_attribute_color_map="polygonAttributeColorMap"
-        :capabilities="capabilities"
-        :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
-        :allowRandom="true"
-      />
-    </OptionsSection>
-  </div>
+  <OptionsSection title="Surfaces Options" class="mt-6">
+    <VisibilitySwitch v-model="surfacesVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="targetSurfaceIds[0]"
+      v-model:coloring_style_key="surfacesColorMode"
+      v-model:color="surfacesColor"
+      v-model:vertex_attribute_name="surfacesVertexAttributeName"
+      v-model:vertex_attribute_range="surfacesVertexAttributeRange"
+      v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
+      v-model:polygon_attribute_name="surfacesPolygonAttributeName"
+      v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
+      v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
+
+  <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
+    <VisibilitySwitch v-model="surfaceVisibility" />
+    <ViewerOptionsColoringTypeSelector
+      :id="modelId"
+      :componentId="surfaceId"
+      v-model:coloring_style_key="surfaceColorMode"
+      v-model:color="surfaceColor"
+      v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_range="vertexAttributeRange"
+      v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:polygon_attribute_name="polygonAttributeName"
+      v-model:polygon_attribute_range="polygonAttributeRange"
+      v-model:polygon_attribute_color_map="polygonAttributeColorMap"
+      :capabilities="capabilities"
+      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :allowRandom="true"
+    />
+  </OptionsSection>
 </template>
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index c4f3620ef..44cfbf024 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -161,83 +161,81 @@ watch(
 );
 </script>
 <template>
-  <div class="px-2">
-    <v-divider class="my-2" />
-    <v-row justify="center" align="center" no-gutters>
-      <v-col cols="auto" class="mr-2">
-        <v-icon size="18" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
-      </v-col>
-      <v-col>
-        <v-select
-          v-model="coloring_style_label"
-          :items="coloring_styles.labels"
-          label="Select a coloring style"
-          density="compact"
-          hide-details
+  <v-divider class="my-2 mx-2" />
+  <v-row justify="center" align="center" no-gutters class="px-2">
+    <v-col cols="auto" class="mr-2">
+      <v-icon size="18" icon="mdi-format-color-fill" v-tooltip:left="'Coloring'" />
+    </v-col>
+    <v-col>
+      <v-select
+        v-model="coloring_style_label"
+        :items="coloring_styles.labels"
+        label="Select a coloring style"
+        density="compact"
+        hide-details
+      />
+    </v-col>
+  </v-row>
+  <v-row class="mt-3 px-2" no-gutters>
+    <v-col cols="12" class="ps-7 pe-1">
+      <template v-if="coloring_style_key === color_dict['value']">
+        <ViewerOptionsColorPicker v-model="color" />
+      </template>
+      <template v-if="coloring_style_key === textures_dict['value']">
+        <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
+      </template>
+      <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="vertex_attribute_name"
+          v-model:range="vertex_attribute_range"
+          v-model:colorMap="vertex_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="vertexSchema"
         />
-      </v-col>
-    </v-row>
-    <v-row class="mt-3" no-gutters>
-      <v-col cols="12" class="ps-7 pe-1">
-        <template v-if="coloring_style_key === color_dict['value']">
-          <ViewerOptionsColorPicker v-model="color" />
-        </template>
-        <template v-if="coloring_style_key === textures_dict['value']">
-          <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
-        </template>
-        <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
-          <ViewerOptionsAttributeSelector
-            v-model:name="vertex_attribute_name"
-            v-model:range="vertex_attribute_range"
-            v-model:colorMap="vertex_attribute_color_map"
-            :id="id"
-            :componentId="componentId"
-            :schema="vertexSchema"
-          />
-        </template>
-        <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
-          <ViewerOptionsAttributeSelector
-            v-model:name="edge_attribute_name"
-            v-model:range="edge_attribute_range"
-            v-model:colorMap="edge_attribute_color_map"
-            :id="id"
-            :componentId="componentId"
-            :schema="edgeSchema"
-          />
-        </template>
-        <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
-          <ViewerOptionsAttributeSelector
-            v-model:name="cell_attribute_name"
-            v-model:range="cell_attribute_range"
-            v-model:colorMap="cell_attribute_color_map"
-            :id="id"
-            :componentId="componentId"
-            :schema="cellSchema"
-          />
-        </template>
-        <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
-          <ViewerOptionsAttributeSelector
-            v-model:name="polygon_attribute_name"
-            v-model:range="polygon_attribute_range"
-            v-model:colorMap="polygon_attribute_color_map"
-            :id="id"
-            :componentId="componentId"
-            :schema="polygonSchema"
-          />
-        </template>
-        <template
-          v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
-        >
-          <ViewerOptionsAttributeSelector
-            v-model:name="polyhedron_attribute_name"
-            v-model:range="polyhedron_attribute_range"
-            v-model:colorMap="polyhedron_attribute_color_map"
-            :id="id"
-            :componentId="componentId"
-            :schema="polyhedronSchema"
-          />
-        </template>
-      </v-col>
-    </v-row>
-  </div>
+      </template>
+      <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="edge_attribute_name"
+          v-model:range="edge_attribute_range"
+          v-model:colorMap="edge_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="edgeSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="cell_attribute_name"
+          v-model:range="cell_attribute_range"
+          v-model:colorMap="cell_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="cellSchema"
+        />
+      </template>
+      <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+        <ViewerOptionsAttributeSelector
+          v-model:name="polygon_attribute_name"
+          v-model:range="polygon_attribute_range"
+          v-model:colorMap="polygon_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polygonSchema"
+        />
+      </template>
+      <template
+        v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
+      >
+        <ViewerOptionsAttributeSelector
+          v-model:name="polyhedron_attribute_name"
+          v-model:range="polyhedron_attribute_range"
+          v-model:colorMap="polyhedron_attribute_color_map"
+          :id="id"
+          :componentId="componentId"
+          :schema="polyhedronSchema"
+        />
+      </template>
+    </v-col>
+  </v-row>
 </template>

From 365f8a885dc9a1e3592472a0b149f8e78cf4eccd Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 28 May 2026 15:03:54 +0000
Subject: [PATCH 7/8] Apply prepare changes

---
 app/components/Viewer/Options/ColoringTypeSelector.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 44cfbf024..277596d2e 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -224,9 +224,7 @@ watch(
           :schema="polygonSchema"
         />
       </template>
-      <template
-        v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
-      >
+      <template v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
         <ViewerOptionsAttributeSelector
           v-model:name="polyhedron_attribute_name"
           v-model:range="polyhedron_attribute_range"

From 96d90b73e3de7e9ac11d729040c3758178a436a2 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 29 May 2026 10:05:18 +0200
Subject: [PATCH 8/8] compact even more

---
 app/components/Viewer/ContextMenu/ContextMenuItem.vue   | 4 ++--
 app/components/Viewer/Generic/Model/BlocksOptions.vue   | 4 ++--
 app/components/Viewer/Generic/Model/CornersOptions.vue  | 4 ++--
 app/components/Viewer/Generic/Model/LinesOptions.vue    | 4 ++--
 app/components/Viewer/Generic/Model/ModelStyleCard.vue  | 4 ++--
 app/components/Viewer/Generic/Model/SurfacesOptions.vue | 4 ++--
 app/components/Viewer/Options/OptionsSection.vue        | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 74a36f720..df3050f31 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -170,10 +170,10 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
-        <v-card-title class="text-subtitle-1 pt-3 pb-1 px-3 font-weight-bold">{{
+        <v-card-title class="text-subtitle-1 pt-3 pb-0 px-3 font-weight-bold">{{
           tooltip
         }}</v-card-title>
-        <v-card-text class="pa-3" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-text class="px-3 pb-3 pt-1" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 1e90e6923..551b2d8bc 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -206,7 +206,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 </script>
 
 <template>
-  <OptionsSection title="Blocks Options" class="mt-6">
+  <OptionsSection title="Blocks Options" class="mt-4">
     <VisibilitySwitch v-model="blocksVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
@@ -225,7 +225,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     />
   </OptionsSection>
 
-  <OptionsSection v-if="blockId" title="Component Options" class="mt-6">
+  <OptionsSection v-if="blockId" title="Component Options" class="mt-4">
     <VisibilitySwitch v-model="blockVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 9998b5015..872bf2b92 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -143,7 +143,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 </script>
 
 <template>
-  <OptionsSection title="Corners Options" class="mt-6">
+  <OptionsSection title="Corners Options" class="mt-4">
     <VisibilitySwitch v-model="cornersVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
@@ -159,7 +159,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     />
   </OptionsSection>
 
-  <OptionsSection v-if="cornerId" title="Component Options" class="mt-6">
+  <OptionsSection v-if="cornerId" title="Component Options" class="mt-4">
     <VisibilitySwitch v-model="cornerVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index f592d4208..ea4719031 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -202,7 +202,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 </script>
 
 <template>
-  <OptionsSection title="Lines Options" class="mt-6">
+  <OptionsSection title="Lines Options" class="mt-4">
     <VisibilitySwitch v-model="linesVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
@@ -221,7 +221,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     />
   </OptionsSection>
 
-  <OptionsSection v-if="lineId" title="Component Options" class="mt-6">
+  <OptionsSection v-if="lineId" title="Component Options" class="mt-4">
     <VisibilitySwitch v-model="lineVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 68026136c..e415744c2 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -132,7 +132,7 @@ watch(modelComponentsColorMode, async (colorMode) => {
       <VisibilitySwitch v-model="modelVisibility" />
     </OptionsSection>
 
-    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-6">
+    <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
       <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
       <v-select
         v-model="modelComponentsColorMode"
@@ -178,7 +178,7 @@ watch(modelComponentsColorMode, async (colorMode) => {
 
 <style scoped>
 .model-style-card {
-  padding-top: 20px;
+  padding-top: 12px;
   overflow-x: hidden;
 }
 
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index 4f06831b8..f5e6d5d88 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -210,7 +210,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 </script>
 
 <template>
-  <OptionsSection title="Surfaces Options" class="mt-6">
+  <OptionsSection title="Surfaces Options" class="mt-4">
     <VisibilitySwitch v-model="surfacesVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
@@ -229,7 +229,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     />
   </OptionsSection>
 
-  <OptionsSection v-if="surfaceId" title="Component Options" class="mt-6">
+  <OptionsSection v-if="surfaceId" title="Component Options" class="mt-4">
     <VisibilitySwitch v-model="surfaceVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
diff --git a/app/components/Viewer/Options/OptionsSection.vue b/app/components/Viewer/Options/OptionsSection.vue
index 8bbf4ff43..b6bce9e62 100644
--- a/app/components/Viewer/Options/OptionsSection.vue
+++ b/app/components/Viewer/Options/OptionsSection.vue
@@ -14,7 +14,7 @@ const isCollapsed = ref(false);
         mdi-chevron-down
       </v-icon>
     </div>
-    <v-container v-show="!isCollapsed" class="pa-0 pt-1 pb-1">
+    <v-container v-show="!isCollapsed" class="pa-0">
       <slot />
     </v-container>
   </div>
@@ -25,7 +25,7 @@ const isCollapsed = ref(false);
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
-  padding: 12px 8px 12px 8px;
+  padding: 8px 4px 6px 4px;
 }
 
 .section-badge {