-5

src/index.css

reviewed

··· 273 273 } 274 274 } 275 275 276 276 - details:not([open]) > summary ~ * { 277 277 - /* HACK: allow JS know that this is invisible */ 278 278 - --invisible: 1; 279 279 - } 280 280 - 281 276 [tabindex='-1'] { 282 277 outline: 0; 283 278 }

+11 -8

src/pages/status.jsx

reviewed

··· 351 351 ); 352 352 const activeStatusRect = activeStatus?.getBoundingClientRect(); 353 353 const allStatusLinks = Array.from( 354 354 - scrollableRef.current.querySelectorAll('.status-link, .status-focus'), 355 355 - ).filter((s) => { 356 356 - return !getComputedStyle(s).getPropertyValue('--invisible'); 357 357 - }); 354 354 + // Select all statuses except those inside collapsed details/summary 355 355 + // Hat-tip to @AmeliaBR@front-end.social 356 356 + // https://front-end.social/@AmeliaBR/109784776146144471 357 357 + scrollableRef.current.querySelectorAll( 358 358 + '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)', 359 359 + ), 360 360 + ); 358 361 console.log({ allStatusLinks }); 359 362 if ( 360 363 activeStatus && ··· 386 389 ); 387 390 const activeStatusRect = activeStatus?.getBoundingClientRect(); 388 391 const allStatusLinks = Array.from( 389 389 - scrollableRef.current.querySelectorAll('.status-link, .status-focus'), 390 390 - ).filter((s) => { 391 391 - return !getComputedStyle(s).getPropertyValue('--invisible'); 392 392 - }); 392 392 + scrollableRef.current.querySelectorAll( 393 393 + '.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)', 394 394 + ), 395 395 + ); 393 396 if ( 394 397 activeStatus && 395 398 activeStatusRect.top < scrollableRef.current.clientHeight &&