@@ -236,85 +236,3 @@ body {
236236 padding : 24px ;
237237 }
238238}
239-
240-
241-
242- /* ---------- container for gradient & clipping ---------- */
243- /* keep this minimal and scoped to mobile portrait where .sidebar is horizontal */
244- .sidebar-container {
245- /* default: no visual change on desktop */
246- display : block;
247- position : relative;
248- overflow : visible;
249- }
250-
251- /* only apply mobile top-bar behaviour in portrait (matches your existing rules) */
252- @media (max-width : 900px ) and (orientation : portrait) {
253- .sidebar-container {
254- /* container handles the gradient/clip while .sidebar scrolls inside it */
255- overflow : hidden;
256- padding : 10px 0 ; /* keep same spacing you used */
257- background : var (--sidebar );
258- border-radius : 14px ;
259- box-shadow : 0 10px 30px rgba (0 , 0 , 0 , 0.06 );
260- }
261-
262- /* the actual scrolling row */
263- .sidebar {
264- display : flex;
265- gap : 6px ;
266- padding-left : 14px ; /* match your existing .sidebar padding */
267- overflow-x : auto;
268- overflow-y : hidden;
269- -webkit-overflow-scrolling : auto; /* help iOS not fade too quickly */
270- scrollbar-width : thin; /* firefox hint */
271- }
272-
273- /* webkit scrollbar style for small phones */
274- .sidebar ::-webkit-scrollbar {
275- height : 6px ;
276- }
277- .sidebar ::-webkit-scrollbar-thumb {
278- background : rgba (0 , 0 , 0 , 0.28 );
279- border-radius : 3px ;
280- }
281-
282- /* gradient fixed to the container's right edge (affordance) */
283- .sidebar-container ::after {
284- content : '' ;
285- position : absolute;
286- top : 0 ;
287- right : 0 ;
288- height : 100% ;
289- width : 44px ; /* hint width; tweak to taste */
290- pointer-events : none;
291- background : linear-gradient (to right, rgba (255 , 255 , 255 , 0 ), rgba (255 , 255 , 255 , 1 ));
292- transition : opacity .18s ease, right .18s ease;
293- opacity : 1 ;
294- border-top-right-radius : 14px ;
295- border-bottom-right-radius : 14px ;
296- }
297-
298- /* hide gradient when scrolled to end OR when no overflow */
299- .sidebar-container .scrolled-end ::after ,
300- .sidebar-container .no-overflow ::after {
301- opacity : 0 ;
302- pointer-events : none;
303- }
304-
305- /* small adjustment so the gradient doesn't fully cover last item */
306- .sidebar-item : last-child {
307- margin-right : 12px ;
308- }
309- }
310-
311- /* landscape (left vertical) behaviour remains unchanged, no gradient */
312- @media (max-width : 900px ) and (orientation : landscape) {
313- /* keep your existing landscape rules */
314- .sidebar {
315- width : 220px ;
316- flex-direction : column;
317- overflow-x : hidden;
318- overflow-y : auto;
319- }
320- }
0 commit comments