From 9c80a0e89f4b7e69aeeb2645bc0d1578c967132d Mon Sep 17 00:00:00 2001
From: Rushan <rushenn@minio.io>
Date: Tue, 8 Oct 2024 19:55:12 +0400
Subject: [PATCH] Fix non .docutils table styles (#1343)

As @pavelanni pointed out, some tables, like the ones shown below, had
broken styling that didn't align with the [design
specs](https://min.io/docs/minio/kubernetes/upstream/design.html#list-table).
This PR resolves the issue by applying the correct styles to ensure
consistency with the overall design guidelines.

**Issue:**


https://min.io/docs/minio/kubernetes/upstream/reference/operator-crd.html#customcertificateconfig

<img width="783" alt="Screenshot 2024-10-08 at 14 26 17"
src="https://github.com/user-attachments/assets/cdb8ff3e-2ace-4bf4-9b43-6dceccb0d2ae">


**Fix:**
<img width="783" alt="Screenshot 2024-10-08 at 15 19 20"
src="https://github.com/user-attachments/assets/6306cdd7-7d19-4452-a109-03328b43128d">
---
 source/_static/scss/includes/_misc.scss  | 10 ---------
 source/_static/scss/includes/_reset.scss | 26 ++++++++++++++++++------
 source/_static/scss/includes/_theme.scss |  1 +
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss
index e0ff5821..4e7f2b19 100644
--- a/source/_static/scss/includes/_misc.scss
+++ b/source/_static/scss/includes/_misc.scss
@@ -371,16 +371,6 @@ figcaption {
    }
 }
 
-
-// ---------------------------------------
-// Fixing table issues from asciidoc -> md
-// ---------------------------------------
-
-table thead tr.header {
-   background-color: lightgray;
-   box-shadow: none;
-}
-
 // --------------------------------------
 // Improving readability of ordered lists
 // --------------------------------------
diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss
index 4dbbe423..0bea0098 100644
--- a/source/_static/scss/includes/_reset.scss
+++ b/source/_static/scss/includes/_reset.scss
@@ -221,24 +221,36 @@ table {
 // ----------------------
 // Table
 // ----------------------
+table,
 table.docutils {
+    all: revert;
     box-shadow: none;
     margin: 1rem 0 2rem;
     width: 100%;
+    border-collapse: collapse;
+
+    & > thead {
+        tr.header {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
 
     td,
     th {
-        border-color: var(--table-border-color);
+        border: 1px solid var(--table-border-color);
         padding: 0.75rem 1rem;
         line-height: 1.5;
         vertical-align: top;
         text-align: left;
+        background: transparent;
     }
 
     th {
         font-weight: $font-weight-medium;
         color: var(--headings-color);
         font-size: $font-size-sm;
+        background-color: var(--table-th-bg);
     }
 
     caption {
@@ -266,24 +278,26 @@ table.docutils {
 
         tr {
             &:first-child {
-                th {
-                    border-top-color: transparent;
+                th,
+                th.stub ~ td {
+                    border-top-width: 0;
                 }
             }
 
             &:last-child {
+                th,
                 td {
-                    border-bottom-color: transparent;
+                    border-bottom-width: 0;
                 }
             }
 
             td, th {
                 &:first-child {
-                    border-left-color: transparent;
+                    border-left-width: 0;
                 }
 
                 &:last-child {
-                    border-right-color: transparent;
+                    border-right-width: 0;
                 }
             }
         }
diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss
index 28533de7..3697bb56 100644
--- a/source/_static/scss/includes/_theme.scss
+++ b/source/_static/scss/includes/_theme.scss
@@ -60,6 +60,7 @@ $theme-properties: (
 
     // Table
     --table-border-color: $light-300 $dark-200,
+    --table-th-bg: $light-100 darken($dark-200, 5%),
 
     // Code
     --code-bg: $light-200 lighten($dark-500, 17.5%),