fix: minor UI styling improvements (#1050)

- Update doc layout and typography styles
- Refine header navigation appearance
- Adjust main table content responsive behavior

Author: julioest

docs/ui/src/css/doc.css

@@ -281,6 +281,7 @@
 .doc table.tableblock th,
 .doc table.tableblock td {
   padding: 0.5rem;
+  transition: background-color 0.2s ease-in-out;
 }
 
 .doc table.tableblock,

docs/ui/src/css/header.css

@@ -103,35 +103,34 @@ body {
 
 .navbar-burger span {
   background-color: var(--navbar-font-color);
-  height: 1.5px;
+  height: 2px;
   width: 1rem;
-}
-
-.navbar-burger:not(.is-active) span {
+  transform-origin: center;
+  backface-visibility: hidden;
   transition:
-    transform ease-out 0.25s,
-    opacity 0s 0.25s,
-    margin-top ease-out 0.25s 0.25s;
+    transform 0.25s ease,
+    opacity 0.25s ease,
+    margin-top 0.25s ease;
 }
 
 .navbar-burger span + span {
   margin-top: 0.25rem;
 }
 
 .navbar-burger.is-active span + span {
-  margin-top: -1.5px;
+  margin-top: -2px;
 }
 
 .navbar-burger.is-active span:nth-child(1) {
-  transform: rotate(45deg);
+  transform: rotate(45deg) translateY(0.5px);
 }
 
 .navbar-burger.is-active span:nth-child(2) {
   opacity: 0;
 }
 
 .navbar-burger.is-active span:nth-child(3) {
-  transform: rotate(-45deg);
+  transform: rotate(-45deg) translateY(-0.5px);
 }
 
 .navbar-item,

docs/ui/src/css/main.css

@@ -3,15 +3,17 @@ body.-toc aside.toc.sidebar {
 }
 
 @media screen and (max-width: 1023.5px) {
-  aside.toc.sidebar {
-    display: none;
-  }
-
   main > .content {
     overflow-x: auto;
   }
 }
 
+@media screen and (max-width: 1300px) {
+  aside.toc.sidebar {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 1024px) {
   main {
     flex: auto;