Undo some CSS resets from normalize/preflight that impacted Ladle's UI (

#136)
tajo · May 11, 2022 · fa8db60 · fa8db60 · vercel · May 11, 2022
1 parent c027c8c
commit fa8db60
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/.changeset/rare-falcons-sin.md b/.changeset/rare-falcons-sin.md
@@ -0,0 +1,5 @@
+---
+"@ladle/react": major
+---
+
+Undo some basic CSS resets from normalize/preflight that impact Ladle's UI when used.
diff --git a/packages/ladle/lib/app/ladle.css b/packages/ladle/lib/app/ladle.css
@@ -36,6 +36,12 @@ body {
   flex-direction: column;
 }
 
+.ladle-aside img,
+.ladle-aside svg {
+  display: inline;
+  vertical-align: baseline;
+}
+
 .ladle-main {
   background-color: var(--ladle-bg-color-primary);
   flex: 1 1 auto;
@@ -400,6 +406,18 @@ div[data-reach-dialog-overlay] {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 }
 
+.ladle-addon-modal-body {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.ladle-addon-modal-body ul {
+  list-style: square;
+  overflow: auto;
+  margin: 8px;
+  padding-left: 40px;
+}
+
 @media (min-width: 768px) {
   html,
   body {
@@ -420,6 +438,10 @@ div[data-reach-dialog-overlay] {
     overflow: hidden;
   }
 
+  .ladle-aside {
+    box-sizing: content-box;
+  }
+
   .ladle-main {
     padding: 3em;
     align-self: stretch;
@@ -447,9 +469,11 @@ div[data-reach-dialog-overlay] {
 
   .ladle-aside li {
     margin: 0.35em 0.35em;
+    line-height: 18px;
   }
 
   .ladle-aside input {
+    line-height: 1;
     background-color: var(--ladle-bg-color-secondary);
   }
 

diff --git a/packages/ladle/lib/app/src/ui.tsx b/packages/ladle/lib/app/src/ui.tsx
@@ -72,14 +72,7 @@ export const Modal: React.FC<{
           <Close />
         </Button>
       </div>
-      <div
-        style={{
-          maxHeight: "80vh",
-          overflow: "auto",
-        }}
-      >
-        {children}
-      </div>
+      <div className="ladle-addon-modal-body">{children}</div>
     </Dialog>
   );
 };