feat: ajouter un style de barre de défilement pour le mode sombre et améliorer le message d'avertissement pour les écrans petits

Author: tacxou

apps/web/src/assets/sass/global.sass

@@ -163,3 +163,14 @@ body.body--dark
 
   & > .q-toolbar.bg-primary
     background-color: var(--q-color-primary, #1976d2)
+
+body.body--dark
+  ::-webkit-scrollbar
+    width: 8px
+
+  ::-webkit-scrollbar-track
+    background: #2e2e2e
+
+  ::-webkit-scrollbar-thumb
+    background-color: #555
+    border-radius: 4px

apps/web/src/components/core/twopan.vue

@@ -61,7 +61,12 @@ q-splitter.fit.q-custom-splitter.absolute.q-pa-sm(
   template(#separator)
     q-avatar(v-if='!isSimple' size="sm" color="primary" icon="mdi-unfold-more-vertical" class="text-white")
   template(#after)
-    q-card.fit(flat bordered style='border-left: none;')
+    q-card.fit.lr-sm(flat bordered v-if='!$q.screen.gt.xs')
+      .flex.items-center.fit.justify-center
+        div.text-center
+          q-icon(name="mdi-alert-outline" color='negative' size="64px")
+          div L'ecran est trop petit pour afficher les détails, tournez votre appareil en mode paysage ou changez la résolution de votre écran/la fenêtre.
+    q-card.fit.gt-xs(flat bordered :style='{ borderLeft: !isSimple ? "none" : "" }')
       .flex.items-center.fit.justify-center(v-if='!targetId')
         div Selectionnez un élément pour voir ses détails ici.
       slot(name="after-content")

apps/web/src/pages/identities/table/[_id]/index.vue

@@ -17,7 +17,7 @@
                   q-item-label(v-for='f in validations[field]' caption) - {{ f }}
           q-card-actions(align="right")
             q-btn(flat label="Fermer" color="primary" v-close-popup)
-      q-toolbar-title Fiche identité
+      q-toolbar-title.gt-xs Fiche identité
       q-separator(v-for='_ in 2' :key='_' vertical)
       q-toggle.q-pr-md.q-pl-xs(
         v-if="identity?._id"