From 09f6acbf2136e3084a3174607ab29a48d5d519b0 Mon Sep 17 00:00:00 2001
From: Deepshika S <ddeepu13@gmail.com>
Date: Wed, 6 Jul 2022 06:21:53 +0530
Subject: [PATCH] docs: fix UI bug on rules index and details pages (#16082)

* fix: UI bug on rules index

* fix: UI bug in rule details page

* fix: UI bug on rule details page

* fix: update rules scss

* docs: fix UI bug on rule index and details page

* docs: revamp rules style

* docs: format scss file
---
 docs/src/_includes/layouts/doc.html        |  2 ++
 docs/src/assets/scss/components/rules.scss | 33 ++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index ed11a29bbaf..13c296e1fea 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -65,8 +65,10 @@ <h2 id="resources">Resources</h2>
             <div class="docs-main__content">
                 <h1>{{ title }}</h1>
                 {% if rule_meta %}
+                    {%set id = true if (rule_meta.docs.recommended or rule_meta.fixable or rule_meta.hasSuggestions) else false %}
                     <p>{{ rule_meta.docs.description | markdown | safe }}</p>
                     {{ ruleCategories({
+                    index: id,
                     recommended: rule_meta.docs.recommended,
                     fixable: rule_meta.fixable,
                     hasSuggestions: rule_meta.hasSuggestions
diff --git a/docs/src/assets/scss/components/rules.scss b/docs/src/assets/scss/components/rules.scss
index 82ec099af10..ec5217272c2 100644
--- a/docs/src/assets/scss/components/rules.scss
+++ b/docs/src/assets/scss/components/rules.scss
@@ -1,14 +1,41 @@
 .rule-categories {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 2rem 1rem;
+    gap: 0;
     margin-bottom: 3rem;
+    background-color: var(--lightest-background-color);
+    border: 1px solid var(--divider-color);
+    border-radius: var(--border-radius);
 
     .rule-category {
         margin: 0;
-        padding: 0;
+        padding: 1rem;
         background: none;
         border: none;
+
+        @media screen and (min-width:768px){
+            &:not(:first-child)::after {
+                content: "";
+                display: block;
+                padding: 1px;
+                border-left: 1px solid var(--divider-color);
+                left: 0px;
+            }
+        }
+
+        @media screen and (min-width:768px) and (max-width:1023px), screen and (min-width:1440px){
+            &:not(:first-child)::after {
+                height: 70%;
+                position: absolute;
+            }
+        }
+
+        @media screen and (min-width:1024px) and (max-width:1439px){
+            &:nth-child(2)::after {
+                height: 70%;
+                position: absolute;
+            }
+        }
     }
 
     .rule-category__description {
@@ -19,6 +46,7 @@
 .rule-category {
     font-size: var(--step--1);
     display: flex;
+    position: relative;
     flex-wrap: wrap;
     align-items: flex-start;
     gap: 1rem;
@@ -133,7 +161,6 @@ a.rule__name {
     }
 }
 
-
 /* related rules */
 
 .related-rules__list {