From 79f5809fca966f9dc2554659b78a6f1ea5702aa7 Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Wed, 29 Oct 2025 10:46:07 +0700
Subject: [PATCH] gutter stuff

---
 src/components/Composer.tsx                     | 4 ++--
 src/routes/profile.$did/post.$rkey.image.$i.tsx | 2 +-
 src/styles/app.css                              | 8 ++++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index 4d852b0..ce4cbb8 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -140,9 +140,9 @@ export function Composer() {
       }}
     >
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
+        <Dialog.Overlay className="fixed disablegutter inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" />
 
-        <Dialog.Content className="fixed overflow-y-scroll inset-0 z-50 flex items-start justify-center py-10 sm:py-20">
+        <Dialog.Content className="fixed gutter overflow-y-scroll inset-0 z-50 flex items-start justify-center pt-10 sm:pt-20 pb-[50dvh] sm:pb-[50dvh]">
           <div className="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl w-full max-w-xl relative mx-4">
             <div className="flex flex-row justify-between p-2">
               <Dialog.Close asChild>
diff --git a/src/routes/profile.$did/post.$rkey.image.$i.tsx b/src/routes/profile.$did/post.$rkey.image.$i.tsx
index 049969b..60c2703 100644
--- a/src/routes/profile.$did/post.$rkey.image.$i.tsx
+++ b/src/routes/profile.$did/post.$rkey.image.$i.tsx
@@ -85,7 +85,7 @@ export function Lightbox() {
             e.stopPropagation();
             e.nativeEvent.stopImmediatePropagation();
           }}
-          className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
+          className="lightbox-sidebar hidden lg:flex overscroll-none disablegutter disablescroll border-l dark:border-gray-800 was7 border-gray-300 fixed z-50 top-0 right-0 flex-col max-w-[350px] min-w-[350px] max-h-screen overflow-y-scroll dark:bg-gray-950 bg-white"
         >
           <ProfilePostComponent
             key={`/profile/${did}/post/${rkey}`}
diff --git a/src/styles/app.css b/src/styles/app.css
index e4760b8..bda6088 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -52,13 +52,17 @@
   }
 }
 
+.gutter{
+  scrollbar-gutter: stable both-edges;
+}
+
 @media (width >= 64rem /* 1024px */) {
   html:not(:has(.disablegutter)),
   body:not(:has(.disablegutter)) {
     scrollbar-gutter: stable both-edges !important;
   }
-  html:has(.disablegutter),
-  body:has(.disablegutter) {
+  html:has(.disablescroll),
+  body:has(.disablescroll) {
     scrollbar-width: none;
     overflow-y: hidden;
   }
-- 
2.51.2