From 57cbeb154533368bd7e63bc19864249b2db867f3 Mon Sep 17 00:00:00 2001
From: Simon Jentsch <simon@bojagi.io>
Date: Fri, 11 Jul 2025 19:55:17 +0200
Subject: [PATCH 1/2] fix: render bugs

---
 src/Button/Button.stories.tsx          | 8 ++++++++
 src/DropdownList/DropdownList.spec.tsx | 0
 src/Input/Input.stories.tsx            | 8 ++++----
 src/SidebarNav/SidebarNavItem.tsx      | 1 +
 src/shared/BaseInput.tsx               | 2 +-
 5 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 src/DropdownList/DropdownList.spec.tsx

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 6570167..4d43af8 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -162,3 +162,11 @@ WithCustomStyles.args = {
     `,
   },
 };
+
+export const Test = () => (
+  <Flex>
+    <div>hi</div>
+    <Button>to big!</Button>
+    <Box height={100}>I am a tall box!</Box>
+  </Flex>
+);
diff --git a/src/DropdownList/DropdownList.spec.tsx b/src/DropdownList/DropdownList.spec.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx
index 0bc8591..4a8e988 100644
--- a/src/Input/Input.stories.tsx
+++ b/src/Input/Input.stories.tsx
@@ -13,7 +13,7 @@ export default {
 
 const ControlledInput = ({ value: valueInitial, ...props }: Omit<InputProps, 'onChange'>) => {
   const [value, setValue] = useState(valueInitial);
-  return <Input value={value} mb={4} {...props} onChange={setValue} />;
+  return <Input value={value} {...props} onChange={setValue} />;
 };
 
 const baseStory = (args) => <ControlledInput {...args} />;
@@ -63,13 +63,13 @@ Error.args = {
 
 export const MultipleInputs = () => (
   <Box>
-    <Box mb={5}>
+    <Box>
       <ControlledInput label="first name" />
     </Box>
-    <Box mb={5}>
+    <Box>
       <ControlledInput label="last name" />
     </Box>
-    <Box mb={5}>
+    <Box>
       <ControlledInput label="credit card no." infoText="optional" />
     </Box>
   </Box>
diff --git a/src/SidebarNav/SidebarNavItem.tsx b/src/SidebarNav/SidebarNavItem.tsx
index 2d10335..296dabf 100644
--- a/src/SidebarNav/SidebarNavItem.tsx
+++ b/src/SidebarNav/SidebarNavItem.tsx
@@ -14,6 +14,7 @@ export interface SidebarNavItemProps extends ButtonBaseProps {
 const SidebarNavItemWrapper = styled.li<SidebarNavItemProps>`
   ${buttonBaseStyles}
   display: flex;
+  cursor: pointer;
   margin: ${getComponentStyle('sidebarNav.item.marginY')} 0;
   ${getCustomStyles('sidebar.item.styles', 'root')}
 
diff --git a/src/shared/BaseInput.tsx b/src/shared/BaseInput.tsx
index a32c46f..c27c88a 100644
--- a/src/shared/BaseInput.tsx
+++ b/src/shared/BaseInput.tsx
@@ -135,7 +135,7 @@ export function BaseInput<P extends Record<string, any>, E extends HTMLElement>(
   const getCustomStyles = useCustomStyles(`${name}.styles`, customStyles);
 
   return (
-    <Box ref={innerRef} css={getCustomStyles('root')} {...boxProps}>
+    <Box ref={innerRef} mb={2} css={getCustomStyles('root')} {...boxProps}>
       {label && (
         <label data-testid={`pbl-${name}-label`} htmlFor={id}>
           <Paragraph mb={0.75} customStyles={{ body: getCustomStyles('label') }}>

From 3fc542a30579fcddf6c69cd6c2254051adbaa31f Mon Sep 17 00:00:00 2001
From: Simon Jentsch <simon@bojagi.io>
Date: Fri, 18 Jul 2025 12:22:40 +0200
Subject: [PATCH 2/2] Update snapshots

---
 src/DropdownList/DropdownList.spec.tsx        |   0
 src/Input/__snapshots__/Input.spec.tsx.snap   |   4 +
 .../__snapshots__/NativeSelect.spec.tsx.snap  |   4 +
 .../__snapshots__/SidebarNav.spec.tsx.snap    |   3 +
 src/Table/__snapshots__/Table.spec.tsx.snap   | 321 ------------------
 .../__snapshots__/TextArea.spec.tsx.snap      |   4 +
 6 files changed, 15 insertions(+), 321 deletions(-)
 delete mode 100644 src/DropdownList/DropdownList.spec.tsx

diff --git a/src/DropdownList/DropdownList.spec.tsx b/src/DropdownList/DropdownList.spec.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Input/__snapshots__/Input.spec.tsx.snap b/src/Input/__snapshots__/Input.spec.tsx.snap
index c7e9d1e..b70131a 100644
--- a/src/Input/__snapshots__/Input.spec.tsx.snap
+++ b/src/Input/__snapshots__/Input.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Render without value 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -67,6 +68,7 @@ exports[`Render without value 1`] = `
 exports[`Show error when an error message is given 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -168,6 +170,7 @@ exports[`Show error when an error message is given 1`] = `
 exports[`Show infotext when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -263,6 +266,7 @@ exports[`Show infotext when available 1`] = `
 exports[`Show label when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
diff --git a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
index af32374..47e4e48 100644
--- a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
+++ b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Render without value 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -111,6 +112,7 @@ exports[`Render without value 1`] = `
 exports[`Show error when an error message is given 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -256,6 +258,7 @@ exports[`Show error when an error message is given 1`] = `
 exports[`Show infotext when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -395,6 +398,7 @@ exports[`Show infotext when available 1`] = `
 exports[`Show label when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
diff --git a/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap b/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap
index 01168dc..bb670b5 100644
--- a/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap
+++ b/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap
@@ -33,6 +33,7 @@ exports[`Render multiple nav items 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  cursor: pointer;
   margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0;
 }
 
@@ -99,6 +100,7 @@ exports[`Render multiple nav items 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  cursor: pointer;
   margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0;
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
@@ -196,6 +198,7 @@ exports[`Render one nav item 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  cursor: pointer;
   margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0;
   background-color: var(--pbl-theme-colors-brand-lightest);
 }
diff --git a/src/Table/__snapshots__/Table.spec.tsx.snap b/src/Table/__snapshots__/Table.spec.tsx.snap
index 396d4bb..90c391a 100644
--- a/src/Table/__snapshots__/Table.spec.tsx.snap
+++ b/src/Table/__snapshots__/Table.spec.tsx.snap
@@ -371,327 +371,6 @@ tr:last-of-type>*>.emotion-16:after {
 </div>
 `;
 
-exports[`Simple Table story snapshot 1`] = `
-.emotion-0 {
-  box-sizing: border-box;
-  gap: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem) clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
-  width: 80vw;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-1 {
-  width: 100%;
-  height: 1px;
-  border-collapse: collapse;
-  border: 0;
-}
-
-.emotion-2 {
-  background-color: var(--pbl-theme-colors-gray-50);
-}
-
-.emotion-4 {
-  padding: 0;
-  text-align: left;
-}
-
-.emotion-4:first-of-type {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-
-.emotion-4:last-of-type {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
-
-.emotion-5 {
-  padding: clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem);
-  padding-bottom: calc(clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem) + );
-  position: relative;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-*>.emotion-5:after {
-  content: '';
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: undefined;
-  width: 100%;
-  background: var(--pbl-theme-colors-gray-100);
-}
-
-*:last-of-type>.emotion-5:after {
-  width: calc(100% - undefined);
-}
-
-.emotion-5:first-of-type>.emotion-5:after {
-  left: undefined;
-  width: calc(100% - undefined);
-}
-
-tr:last-of-type>*>.emotion-5:after {
-  content: none;
-}
-
-.emotion-6 {
-  box-sizing: border-box;
-  font-family: var(--pbl-theme-typography-base-fontFamily);
-  font-size: var(--pbl-theme-typography-base-fontSize);
-  line-height: var(--pbl-theme-typography-base-lineHeight);
-  font-weight: var(--pbl-theme-typography-base-fontWeight);
-  margin-bottom: var(--pbl-theme-typography-base-marginBottom);
-  font-style: normal;
-  margin: 0;
-  font-family: var(--pbl-theme-typography-body-fontFamily);
-  font-size: var(--pbl-theme-typography-body-fontSize);
-  line-height: var(--pbl-theme-typography-body-lineHeight);
-  font-weight: var(--pbl-theme-typography-body-fontWeight);
-  margin-bottom: var(--pbl-theme-typography-body-marginBottom);
-  margin-bottom: 0;
-}
-
-.emotion-15 {
-  padding: 0;
-}
-
-.emotion-16 {
-  padding: clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem);
-  padding-bottom: calc(clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem) + 1px);
-  position: relative;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-*>.emotion-16:after {
-  content: '';
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  background: var(--pbl-theme-colors-gray-100);
-}
-
-*:last-of-type>.emotion-16:after {
-  width: calc(100% - clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem));
-}
-
-.emotion-16:first-of-type>.emotion-16:after {
-  left: clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem);
-  width: calc(100% - clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem));
-}
-
-tr:last-of-type>*>.emotion-16:after {
-  content: none;
-}
-
-<div
-  class="emotion-0"
-  width="80vw"
->
-  <table
-    class="emotion-1"
-  >
-    <thead
-      class="emotion-2"
-    >
-      <tr
-        class="emotion-3"
-      >
-        <th
-          class="emotion-4"
-        >
-          <div
-            class="emotion-5"
-          >
-            <p
-              class="emotion-6"
-            >
-              Game
-            </p>
-          </div>
-        </th>
-        <th
-          class="emotion-4"
-        >
-          <div
-            class="emotion-5"
-          >
-            <p
-              class="emotion-6"
-            >
-              Year
-            </p>
-          </div>
-        </th>
-        <th
-          class="emotion-4"
-        >
-          <div
-            class="emotion-5"
-          >
-            <p
-              class="emotion-6"
-            >
-              Platform
-            </p>
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="emotion-3"
-    >
-      <tr
-        class="emotion-3"
-      >
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              Final Fantasy VI
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              1994
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              SNES
-            </p>
-          </div>
-        </td>
-      </tr>
-      <tr
-        class="emotion-3"
-      >
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              Metal Gear Solid
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              1998
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              PS1
-            </p>
-          </div>
-        </td>
-      </tr>
-      <tr
-        class="emotion-3"
-      >
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              The Legend of Zelda: Ocarina of Time
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              1998
-            </p>
-          </div>
-        </td>
-        <td
-          class="emotion-15"
-        >
-          <div
-            class="emotion-16"
-          >
-            <p
-              class="emotion-6"
-            >
-              N64
-            </p>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
 exports[`Simple table story snapshot 1`] = `
 .emotion-0 {
   box-sizing: border-box;
diff --git a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
index a211e54..22f242c 100644
--- a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
+++ b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Render without value 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -64,6 +65,7 @@ exports[`Render without value 1`] = `
 exports[`Show error when an error message is given 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -164,6 +166,7 @@ exports[`Show error when an error message is given 1`] = `
 exports[`Show infotext when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {
@@ -258,6 +261,7 @@ exports[`Show infotext when available 1`] = `
 exports[`Show label when available 1`] = `
 .emotion-0 {
   box-sizing: border-box;
+  margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem);
 }
 
 .emotion-1 {