Fix bugs with height

BenLorantfy · Jul 21, 2024 · 607dc16 · 607dc16
1 parent e049c04
commit 607dc16
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 
 ## Motivation
 
-Zod is an amazing library. However, hairy zod errors can take a while to understand. The goal of `zod-error-viewer` is to drastically cut down on the time it takes to read and understand even the most complex zod errors.
+Zod is a game changer for building quality software. However, hairy zod errors can take a while to understand. The goal of `zod-error-viewer` is to drastically cut down on the time it takes to read and understand even the most complex zod errors.
 
 ## Getting Started
 

diff --git a/packages/zod-error-viewer/.storybook/preview-head.html b/packages/zod-error-viewer/.storybook/preview-head.html
@@ -1,5 +1,11 @@
 <style>
+  html,
+  body {
+    height: 100%;
+  }
+
   #storybook-root {
     max-width: 100%;
+    height: 100%;
   }
 </style>
diff --git a/packages/zod-error-viewer/README.md b/packages/zod-error-viewer/README.md
diff --git a/packages/zod-error-viewer/img/example.png b/packages/zod-error-viewer/img/example.png
diff --git a/packages/zod-error-viewer/img/logo.png b/packages/zod-error-viewer/img/logo.png
diff --git a/packages/zod-error-viewer/package.json b/packages/zod-error-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zod-error-viewer",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "author": {
     "name": "Ben Lorantfy",

diff --git a/packages/zod-error-viewer/src/ZodErrorViewer.stories.tsx b/packages/zod-error-viewer/src/ZodErrorViewer.stories.tsx
@@ -451,5 +451,9 @@ export const CustomTheme: Story = {
       truncationBackground: "#4b4b4b",
       truncation: "#d3d3d3",
     },
+    height: "fill",
+  },
+  parameters: {
+    layout: "fullscreen",
   },
 };
diff --git a/packages/zod-error-viewer/src/ZodErrorViewer.tsx b/packages/zod-error-viewer/src/ZodErrorViewer.tsx
@@ -94,12 +94,23 @@ export function ZodErrorViewer({
         overflowX: "hidden",
       }}
     >
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          height: height === "fill" ? "100%" : 0,
+          width: "3.25em",
+          backgroundColor: mergedTheme.lineNumberBackground,
+        }}
+      ></div>
       <div
         style={{
           position: "relative",
           height: height === "fill" ? "100%" : undefined,
           overflow: "auto",
           maxWidth: "100%",
+          lineHeight: 0,
         }}
       >
         <div style={{ width: "max-content" }}>