docs: fix divider for rule category (#19264)

Tanujkanti4441 · web-flow · commit e39d3f22ff79 · 2025-01-13T17:53:45.000-05:00
* docs: fix divider for fourth rule category

* fix alignment of rule category description

* apply suggestion

* remove flex property
diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss
@@ -20,25 +20,30 @@
                 border-left: 1px solid var(--divider-color);
                 left: 0;
             }
+
+            &:nth-child(2)::after {
+                height: 70%;
+                position: absolute;
+            }
         }
 
         @media screen and (min-width: 768px) and (max-width: 799px), screen and (min-width: 854px) and (max-width: 1023px), screen and (min-width: 1256px) {
-            &:not(:first-child)::after {
+            &:nth-child(3)::after {
                 height: 70%;
                 position: absolute;
             }
         }
 
-        @media screen and (min-width: 800px) and (max-width: 853px), screen and (min-width: 1024px) and (max-width: 1255px) {
-            &:nth-child(2)::after {
+        @media screen and (min-width: 800px) and (max-width: 853px), screen and (min-width: 1024px) and (max-width: 1255px), screen and (min-width: 1654px) and (max-width: 1982px) {
+            &:nth-child(4)::after {
                 height: 70%;
                 position: absolute;
             }
         }
     }
 
     .rule-category__description {
-        flex: 1 1 45ch;
+        height: 100%;
     }
 }
 
@@ -58,10 +63,6 @@
     p {
         margin: 0;
     }
-
-    .rule-category__description {
-        flex: 1 1 30ch;
-    }
 }
 
 .rule:not(.token) {
@@ -80,11 +81,6 @@
     }
 }
 
-.rule--deprecated,
-.rule--removed {
-    // opacity: .5;
-}
-
 .rule__content {
     flex: 1 1 35ch;
     overflow-x: auto;

Original file line number	Diff line number	Diff line change
`@@ -20,25 +20,30 @@`
`20`	`20`	`border-left: 1px solid var(--divider-color);`
`21`	`21`	`left: 0;`
`22`	`22`	`}`
	`23`	`+`
	`24`	`+ &:nth-child(2)::after {`
	`25`	`+ height: 70%;`
	`26`	`+ position: absolute;`
	`27`	`+ }`
`23`	`28`	`}`
`24`	`29`
`25`	`30`	`@media screen and (min-width: 768px) and (max-width: 799px), screen and (min-width: 854px) and (max-width: 1023px), screen and (min-width: 1256px) {`
`26`		`- &:not(:first-child)::after {`
	`31`	`+ &:nth-child(3)::after {`
`27`	`32`	`height: 70%;`
`28`	`33`	`position: absolute;`
`29`	`34`	`}`
`30`	`35`	`}`
`31`	`36`
`32`		`- @media screen and (min-width: 800px) and (max-width: 853px), screen and (min-width: 1024px) and (max-width: 1255px) {`
`33`		`- &:nth-child(2)::after {`
	`37`	`+ @media screen and (min-width: 800px) and (max-width: 853px), screen and (min-width: 1024px) and (max-width: 1255px), screen and (min-width: 1654px) and (max-width: 1982px) {`
	`38`	`+ &:nth-child(4)::after {`
`34`	`39`	`height: 70%;`
`35`	`40`	`position: absolute;`
`36`	`41`	`}`
`37`	`42`	`}`
`38`	`43`	`}`
`39`	`44`
`40`	`45`	`.rule-category__description {`
`41`		`- flex: 1 1 45ch;`
	`46`	`+ height: 100%;`
`42`	`47`	`}`
`43`	`48`	`}`
`44`	`49`
`@@ -58,10 +63,6 @@`
`58`	`63`	`p {`
`59`	`64`	`margin: 0;`
`60`	`65`	`}`
`61`		`-`
`62`		`- .rule-category__description {`
`63`		`- flex: 1 1 30ch;`
`64`		`- }`
`65`	`66`	`}`
`66`	`67`
`67`	`68`	`.rule:not(.token) {`
`@@ -80,11 +81,6 @@`
`80`	`81`	`}`
`81`	`82`	`}`
`82`	`83`
`83`		`-.rule--deprecated,`
`84`		`-.rule--removed {`
`85`		`- // opacity: .5;`
`86`		`-}`
`87`		`-`
`88`	`84`	`.rule__content {`
`89`	`85`	`flex: 1 1 35ch;`
`90`	`86`	`overflow-x: auto;`