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 */