Version 2.1.0 - Update UI

src/components/UI/Box.vue

@@ -6,11 +6,11 @@
 <style scoped>
     div {
         background-color: var(--secondary);
-        border-radius: 10px;
+        border-radius: var(--radius);
     }
 
     .box-shadow {
-        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
+        box-shadow: var(--shadow);
     }
 
 
@@ -23,13 +23,19 @@
     }
 
     .first {
-        background-color: var(--secondary);
-    }   
+        background-color: var(--surface-1);
+    }
     .second {
-        background-color: var(--tertiary);
+        background-color: var(--surface-2);
     }
 </style>
 <script setup>
+/**
+ * Panneau de fond (ancienne primitive de mise en page : en-têtes, file, vue…).
+ * Props : level ('first' = --surface-1, 'second' = --surface-2), padding ('far' 30 px, 'closed' 10 px),
+ *         boxClass (classes ajoutées), width (largeur max. ; sinon largeur naturelle), noShadow, overbox (coins bas carrés).
+ * Pour un nouveau bloc avec titre / actions, préférer Card.
+ */
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -39,7 +45,7 @@ const props = defineProps({
     },
     padding: {
         type: String,
-        
+
         default: 'far'
     },
     boxClass: {
@@ -62,10 +68,12 @@ const props = defineProps({
 
 const widthStyle = computed(() => {
     if (props.width) {
-        return `max-width: ${props.width}; width: 70%;`;
+        // Largeur max. demandée, mais jamais collée aux bords sur petit écran (avant : 70 %, trop étroit sur mobile)
+        const width = props.width.replace(/;+\s*$/, '');
+        return `max-width: ${width}; width: calc(100% - 40px); box-sizing: border-box;`;
     }
     return '';
-}); 
+});
 
 const overboxStyle = computed(() => {
     return props.overbox ? 'border-radius: 10px 10px 0 0; padding: 10px 10px 0 10px;' : '';