fix: DTLPanel + VirtualSample dialog display

close #105

src/assets/css/src/2.blocks.design-to-light.css

@@ -143,7 +143,18 @@
   top: 2rem;
   bottom: 5.5rem;
   color: var(--color-white);
-  z-index: 999;
+  z-index: 9999;
+  overflow: hidden;
+}
+#dtl-panel.with-dialog {
+  max-height: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
+  max-width: 25rem;
+  top: 0;
+  bottom: 0;
+  margin-block: auto;
+}
+#dtl-panel > header {
+  height: 3.5rem;
 }
 #dtl-panel .border-b {
   border-color: var(--color-white-10);
@@ -159,11 +170,18 @@
 #dtl-panel [role="tablist"] {
   display: flex;
   padding: 0 var(--space-32);
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+#dtl-panel [role="tablist"]::-webkit-scrollbar {
+  display: none;
 }
 #dtl-panel [role="tab"] {
   padding: var(--space-12) .625rem;
   color: var(--color-grey-400);
   font-weight: 500;
+  white-space: pre;
 }
 #dtl-panel [role="tab"][aria-selected="true"] {
   color: var(--color-white);

src/assets/css/src/2.blocks.dialog.css

@@ -16,6 +16,13 @@
   overflow: hidden;
   background: var(--dialog-background);
   margin: auto !important;
+  left: var(--gutter);
+  right: var(--gutter);
+}
+
+.dialog.with-dtl {
+  --dialog-max-w: min(100vw - var(--gutter) * 2 - 26rem, 77rem);
+  margin-right: 30rem !important;
 }
 
 /* Header */

src/components/design-to-light/DTLPanel.vue

@@ -2,6 +2,7 @@
   <aside
     id="dtl-panel"
     class="text-sm bg-black rounded-2xl"
+    :class="{'with-dialog': isDialogOpen}"
     aria-labelledby="dtl-label"
     @click="preventClose($event)"
   >
@@ -9,8 +10,9 @@
       class="flex items-center | border-b pl-32 pr-16 py-8"
       data-icon="leaf"
       style="--column-gap: 0.5rem"
-    >
+    > 
-      <h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
+      <!-- TODO: ajouter un title à dans le Panel pour chaque propositio et l'utiliser ici pour le h2 -->
+      <h2 id="dtl-label" class="font-serif text-md">Design to Light</h2>
       <button
         v-if="!isDialogOpen"
         @click="emits('close')"

src/components/project/virtual-sample/VirtualSample.vue

@@ -7,7 +7,7 @@
     dismissableMask="true"
     header="Titre du rendu"
     class="dialog"
-    :class="[{ 'with-comments': isCommentsOpen }, activeTab]"
+    :class="[{ 'with-comments': isCommentsOpen }, activeTab, { 'with-dtl': correspondingDTLProposal}]"
     :closeOnEscape="true"
   >
     <template #header>