silky modal: simplify DOM

Author: Sheraff

src/pages/silky-modal/index.tsx

@@ -71,11 +71,12 @@ function Second() {
 			<dialog id={id} ref={(e) => {
 				if (!e) return
 				const observer = new IntersectionObserver(([entry]) => !entry.isIntersecting && e.close(), { rootMargin: '-1px' })
-				observer.observe(e.querySelector<HTMLDivElement>('[data-dialog-area]')!)
+				const area = e.querySelector<HTMLDivElement>('[data-dialog-area]')!
+				observer.observe(area)
 				const controller = new AbortController()
 				e.addEventListener('beforetoggle', (event) => {
 					if (event.newState === 'open') requestAnimationFrame(() => {
-						e.scrollTop = e.querySelector<HTMLDivElement>('[data-dialog-bumper="before"]')!.getBoundingClientRect().height
+						e.scrollTop = area.offsetTop
 						e.querySelector<HTMLDivElement>('[data-dialog-content]')!.scrollTop = 0
 					})
 				}, { signal: controller.signal })
@@ -84,13 +85,11 @@ function Second() {
 					observer.disconnect()
 				}
 			}}>
-				<div data-dialog-bumper="before" />
 				<div data-dialog-area onClick={onClose}>
 					<div data-dialog-content onClick={(e) => e.stopPropagation()}>
 						<Content id={id} />
 					</div>
 				</div>
-				<div data-dialog-bumper="after" />
 			</dialog>
 		</div>
 	)

src/pages/silky-modal/styles.module.css

@@ -149,20 +149,13 @@
 			background-color: rgba(0, 0, 0, 0.5);
 		}
 
-		&>div[data-dialog-bumper="before"] {
+		&::before,
+		&::after {
+			content: "";
+			display: block;
 			min-height: 200dvh;
 			width: 100%;
 			scroll-snap-align: start;
-			/* outline: 2px solid blue;
-			outline-offset: -2px; */
-		}
-
-		&>div[data-dialog-bumper="after"] {
-			min-height: 200dvh;
-			width: 100%;
-			scroll-snap-align: start;
-			/* outline: 2px solid red;
-			outline-offset: -2px; */
 		}
 
 		&>div[data-dialog-area] {
@@ -178,7 +171,7 @@
 			place-items: center;
 		}
 
-		&>div[data-dialog-area]>div[data-dialog-content] {
+		&>div>div[data-dialog-content] {
 			overflow: hidden auto;
 			scrollbar-width: none;
 

src/router.ts

@@ -175,7 +175,7 @@ export const ROUTES = {
 			tags: ['css']
 		},
 		git: {
-			lastModified: 1764247721000,
+			lastModified: 1764268201000,
 			firstAdded: 1764198910000
 		},
 	},