an appview-less Bluesky client using Constellation and PDS Queries reddwarf.app
frontend spa bluesky reddwarf microcosm

gutter stuff

rimar1337 79f5809f 69f8676a

Changed files
+9 -5
src
components
routes
styles
+2 -2
src/components/Composer.tsx
··· 140 140 }} 141 141 > 142 142 <Dialog.Portal> 143 - <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 143 + <Dialog.Overlay className="fixed disablegutter inset-0 z-50 bg-black/40 dark:bg-black/50 data-[state=open]:animate-fadeIn" /> 144 144 145 - <Dialog.Content className="fixed overflow-y-scroll inset-0 z-50 flex items-start justify-center py-10 sm:py-20"> 145 + <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]"> 146 146 <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"> 147 147 <div className="flex flex-row justify-between p-2"> 148 148 <Dialog.Close asChild>
+1 -1
src/routes/profile.$did/post.$rkey.image.$i.tsx
··· 85 85 e.stopPropagation(); 86 86 e.nativeEvent.stopImmediatePropagation(); 87 87 }} 88 - 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" 88 + 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" 89 89 > 90 90 <ProfilePostComponent 91 91 key={`/profile/${did}/post/${rkey}`}
+6 -2
src/styles/app.css
··· 52 52 } 53 53 } 54 54 55 + .gutter{ 56 + scrollbar-gutter: stable both-edges; 57 + } 58 + 55 59 @media (width >= 64rem /* 1024px */) { 56 60 html:not(:has(.disablegutter)), 57 61 body:not(:has(.disablegutter)) { 58 62 scrollbar-gutter: stable both-edges !important; 59 63 } 60 - html:has(.disablegutter), 61 - body:has(.disablegutter) { 64 + html:has(.disablescroll), 65 + body:has(.disablescroll) { 62 66 scrollbar-width: none; 63 67 overflow-y: hidden; 64 68 }