fix(themes): cap narrow-viewport sidebar and restore aside selectors (#8749)

* fix(themes): tighten narrow-viewport sidebar with Material drawer cap

Cap `.aside.visible` width at `min(var(--width-aside, 320px), calc(100vw - 56px))` instead of 90%. Themes that define `--width-aside` (Swage) keep their existing value; others get a 320px cap with a 56px touch peek of the underlying view.

Also restores aside selectors dropped by recent refactors:
- #8201 renamed `.aside:target` to `.aside.visible` in base-theme; this fix applies the same rename in Swage, Nord, Origine, and Alternative-Dark
- #8200 dropped Swage's narrow-viewport sidebar width override; the new base cap covers that case for Swage and the other themes equally
- Nord's `max-width: 300px` aside override is now redundant with the base cap and is removed

* fix(themes): merge duplicate .aside.visible rule

---------

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>

p/themes/Alternative-Dark/adark.css

@@ -1139,7 +1139,7 @@ kbd {
 		filter: brightness(2);
 	}
 
-	.aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close {
+	.aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close {
 		background-color: var(--background-color-slider-shadow);
 	}
 

p/themes/Alternative-Dark/adark.rtl.css

@@ -1139,7 +1139,7 @@ kbd {
 		filter: brightness(2);
 	}
 
-	.aside:target + .close-aside, .configure .dropdown-target:target ~ .dropdown-close {
+	.aside.visible + .close-aside, .configure .dropdown-target:target ~ .dropdown-close {
 		background-color: var(--background-color-slider-shadow);
 	}
 

p/themes/Nord/nord.css

@@ -1233,7 +1233,7 @@ optgroup::before {
 /*===========*/
 
 @media (max-width: 840px) {
-	.aside:target + .close-aside,
+	.aside.visible + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
 		backdrop-filter: grayscale(60%) blur(1px);
 	}
@@ -1243,7 +1243,6 @@ optgroup::before {
 	}
 
 	.nav.aside {
-		max-width: 300px;
 		border-radius: 0;
 	}
 

p/themes/Nord/nord.rtl.css

@@ -1233,7 +1233,7 @@ optgroup::before {
 /*===========*/
 
 @media (max-width: 840px) {
-	.aside:target + .close-aside,
+	.aside.visible + .close-aside,
 	.configure .dropdown-target:target ~ .dropdown-close {
 		backdrop-filter: grayscale(60%) blur(1px);
 	}
@@ -1243,7 +1243,6 @@ optgroup::before {
 	}
 
 	.nav.aside {
-		max-width: 300px;
 		border-radius: 0;
 	}
 

p/themes/Origine/origine.css

@@ -1163,7 +1163,7 @@ button:hover .icon,
 		padding-bottom: 0;
 	}
 
-	.aside:target {
+	.aside.visible {
 		box-shadow: 3px 0 3px var(--text-shadow-color);
 	}
 

p/themes/Origine/origine.rtl.css

@@ -1163,7 +1163,7 @@ button:hover .icon,
 		padding-bottom: 0;
 	}
 
-	.aside:target {
+	.aside.visible {
 		box-shadow: -3px 0 3px var(--text-shadow-color);
 	}
 

p/themes/Swage/swage.css

@@ -880,7 +880,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 	margin-bottom: 1rem;
 }
 
-.aside:target .toggle_aside {
+.aside.visible .toggle_aside {
 	border-bottom: 1px solid var(--frss-border-color);
 }
 
@@ -1243,8 +1243,7 @@ body.reader {
 		text-align: center;
 	}
 
-	.aside:target {
-		width: var(--width-aside);
+	.aside.visible {
 		padding-top: 0;
 	}
 }

p/themes/Swage/swage.rtl.css

@@ -880,7 +880,7 @@ main.post .drop-section li.item.feed a:hover .icon {
 	margin-bottom: 1rem;
 }
 
-.aside:target .toggle_aside {
+.aside.visible .toggle_aside {
 	border-bottom: 1px solid var(--frss-border-color);
 }
 
@@ -1243,8 +1243,7 @@ body.reader {
 		text-align: center;
 	}
 
-	.aside:target {
-		width: var(--width-aside);
+	.aside.visible {
 		padding-top: 0;
 	}
 }

p/themes/base-theme/frss.css

@@ -2495,7 +2495,10 @@ html.slider-active {
 		display: none;
 	}
 
+	/* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */
 	.aside.visible {
+		width: min(var(--width-aside, 320px), calc(100vw - 56px));
+		height: 100vh;
 		box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
@@ -2774,12 +2777,6 @@ html.slider-active {
 		transition: width 200ms linear;
 	}
 
-	.aside.visible,
-	.reader .aside.visible {
-		width: 90%;
-		height: 100vh;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}

p/themes/base-theme/frss.rtl.css

@@ -2495,7 +2495,10 @@ html.slider-active {
 		display: none;
 	}
 
+	/* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */
 	.aside.visible {
+		width: min(var(--width-aside, 320px), calc(100vw - 56px));
+		height: 100vh;
 		box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}
 
@@ -2774,12 +2777,6 @@ html.slider-active {
 		transition: width 200ms linear;
 	}
 
-	.aside.visible,
-	.reader .aside.visible {
-		width: 90%;
-		height: 100vh;
-	}
-
 	.aside.aside_feed {
 		padding: 0;
 	}