tiny adjustment

globalbrain · Dec 2, 2024 · 8ed9786 · 8ed9786
1 parent 21df1db
commit 8ed9786
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/docs/components/content.md b/docs/components/content.md
@@ -48,14 +48,15 @@ Place HTML elements inside `<SContent>` component and it will apply basic styles
 
 The supported elements are:
 
-- `<h1>` <Badge text="3.11.0" />
-- `<h2>` <Badge text="3.11.0" />
+- `<h1>`
+- `<h2>`
+- `<h3>`
 - `<p>`
 - `<strong>`
 - `<a>`
 - `<ul>`
 - `<ol>`
-- `<li>`
+- `<table>`
 
 ### Use CSS class to style the headings
 

diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
@@ -112,24 +112,33 @@
 }
 
 .SContent :deep(table) {
-  box-shadow: 0 0 0 1px var(--c-divider);
-  overflow: clip;
-  margin: 4px 0;
+  margin: 8px 0;
   border-style: hidden;
   border-radius: 6px;
+  text-align: left;
   font-size: 14px;
   color: var(--c-text-1);
-  text-align: left;
+  overflow: clip;
+  box-shadow: 0 0 0 1px var(--c-divider);
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
+
+.SContent :deep(table thead > tr > th) {
+  vertical-align: middle;
 }
 
 .SContent :deep(table th),
 .SContent :deep(table td) {
-  overflow-wrap: break-word;
-  height: 40px;
-  padding: 8px 16px;
-  background-color: var(--c-bg-elv-3);
   border: 1px solid var(--c-gutter);
+  padding: 8px 16px;
+  height: 40px;
+  vertical-align: top;
   text-wrap: pretty;
+  background-color: var(--c-bg-elv-3);
+  overflow-wrap: break-word;
 }
 
 .SContent :deep(table th) {
@@ -138,8 +147,4 @@
   color: var(--c-text-2);
   text-wrap: balance;
 }
-
-.SContent :deep(table tr:hover td) {
-  background-color: var(--c-bg-elv-4);
-}
 </style>