+10 -8

src/app.css

reviewed

··· 913 913 display: flex; 914 914 } 915 915 .deck-backdrop .deck.deck-view-full { 916 916 - min-width: 100%; 916 916 + /* min-width: 100%; */ 917 917 + width: 100%; 917 918 background-image: radial-gradient( 918 919 circle, 919 920 transparent 30em, ··· 993 994 994 995 .media-modal-container { 995 996 position: relative; 996 996 - width: 100%; 997 997 + width: 70%; 998 998 + flex-grow: 1; 997 999 background-color: var(--backdrop-solid-color); 998 1000 animation: appear 0.3s var(--timing-function) both; 999 1001 } ··· 1196 1198 width: auto; 1197 1199 } 1198 1200 /* ✨ New */ 1199 1199 - .deck-backdrop > a { 1201 1201 + /* .deck-backdrop > a { 1200 1202 width: 100%; 1201 1203 flex-grow: 0; 1202 1202 - } 1204 1204 + } */ 1203 1205 .deck-backdrop .media-modal-container + .status-deck:not(.deck-view-full) { 1204 1206 /* display: block; */ 1205 1205 - /* width: 350px; */ 1206 1206 - min-width: 350px; 1207 1207 + width: 30%; 1208 1208 + /* min-width: 350px; */ 1207 1209 position: static; 1208 1210 z-index: 1; 1209 1211 pointer-events: auto; ··· 2109 2111 transform: translate3d(-5vw, 0, 0); 2110 2112 } 2111 2113 .deck-backdrop .deck { 2112 2112 - width: 50%; 2113 2113 - min-width: var(--main-width); 2114 2114 + /* width: 50%; 2115 2115 + min-width: var(--main-width); */ 2114 2116 border-left: 1px solid var(--divider-color); 2115 2117 } 2116 2118 .timeline-deck {

+2 -1

src/components/media-modal.jsx

reviewed

··· 44 44 left: scrollLeft, 45 45 behavior: differentStatusID ? 'auto' : 'smooth', 46 46 }); 47 47 + carouselRef.current.focus(); 47 48 }, [index, statusID]); 48 49 49 50 const [showControls, setShowControls] = useState(true); ··· 95 96 <div class="media-modal-container"> 96 97 <div 97 98 ref={carouselRef} 98 98 - tabIndex="-1" 99 99 + tabIndex="0" 99 100 data-swipe-threshold="44" 100 101 class="carousel" 101 102 onClick={(e) => {