From 5f734ab45bd01752a6dcdfa5b4a95711734d6f99 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Fri, 10 Jan 2025 14:21:44 +0100
Subject: [PATCH] fix: dialog__inner .options-selector overflow

close #97
---
 src/assets/css/src/2.blocks.dialog.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index d017ac4..9aee334 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -75,10 +75,33 @@
   border-radius: var(--rounded-xl);
   padding: var(--space-8);
   border: var(--border-width) solid var(--color-grey-200);
+  padding-right: 11.25rem;
+  position: relative;
 }
 .dialog__inner .options-selector {
   display: flex;
   gap: var(--space-8);
+  overflow-x: auto;
+  padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
+  margin: calc(-1 * var(--space-8));
+  position: relative;
+}
+.dialog__inner .options-selector > *:last-child {
+  margin-right: 1rem;
+}
+.dialog__inner .options-selector + button {
+  position: absolute;
+  right: var(--space-8);
+}
+.dialog__inner .options-selector + button::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: calc(-3rem - 1px);
+  top: -1px;
+  bottom: -1px;
+  width: 3rem;
+  background: linear-gradient(to right, transparent, #FBFBFB);
 }
 .dialog [data-pc-section="content"] [role="tablist"] {
   height: 3.5rem;