chore(qol): CSS changes (#9093)

Author: avivkeller

.changeset/large-pandas-refuse.md

@@ -0,0 +1,5 @@
+---
+'@node-core/ui-components': patch
+---
+
+Quality-of-life style improvements

packages/ui-components/src/Common/ChangeHistory/index.module.css

@@ -32,7 +32,8 @@
     z-50
     mt-1
     max-h-80
-    w-52
+    w-[26rem]
+    max-w-[calc(100vw-2rem)]
     overflow-hidden
     rounded-sm
     border
@@ -45,7 +46,7 @@
 
 .dropdownContentInner {
   @apply max-h-80
-    w-52
+    w-full
     overflow-y-auto;
 }
 
@@ -64,7 +65,7 @@
   &:hover,
   &:focus-visible {
     @apply bg-brand-600
-      text-white;
+      text-white!;
   }
 }
 

packages/ui-components/src/Common/TableOfContents/index.module.css

@@ -41,7 +41,6 @@
   .link {
     @apply inline-block
       text-sm
-      font-semibold
       text-neutral-900
       underline
       hover:text-neutral-700
@@ -50,8 +49,7 @@
   }
 
   .codeLink {
-    @apply font-ibm-plex-mono
-      font-medium;
+    @apply font-ibm-plex-mono;
   }
 
   .depthThree {

packages/ui-components/src/Containers/MetaBar/index.module.css

@@ -48,7 +48,6 @@
     a {
       @apply max-ml:inline-block
         max-ml:py-1
-        font-semibold
         text-neutral-900
         underline
         dark:text-white;
@@ -60,8 +59,7 @@
     }
 
     a.codeLink {
-      @apply font-ibm-plex-mono
-        font-medium;
+      @apply font-ibm-plex-mono;
     }
 
     ol {

packages/ui-components/src/Containers/Sidebar/index.module.css

@@ -4,6 +4,7 @@
   @apply ml:max-w-xs
     ml:overflow-auto
     ml:border-r
+    ml:pb-10
     scrollbar-thin
     z-0
     flex

packages/ui-components/src/styles/markdown.css

@@ -41,8 +41,10 @@ main {
   h4,
   h5,
   h6 {
-    @apply font-semibold
+    @apply mt-4
+      font-semibold
       text-neutral-900
+      first:mt-0
       dark:text-white;
 
     &[id] a {

packages/ui-components/src/styles/theme.css

@@ -7,7 +7,7 @@
 @theme {
   --container-8xl: 88rem;
   --container-9xl: 96rem;
-  --container-10xl: 104rem;
+  --container-10xl: 110rem;
   --container-11xl: 112rem;
   --container-12xl: 120rem;
   --breakpoint-ml: 896px;