Change Bar height to auto (#121)

Author: JamesDoingStuff

changelog.md

@@ -10,6 +10,7 @@ SciReactUI Changelog
 
 ### Fixed
 - Hovering over a slot caused a popup with the slot title in. This has been removed.
+- Stopped Bar-based components (e.g. Navbar, Footer) from expanding when a parent component has a set height
 
 ### Changed
 - Remove first-child css selector as it causes problems with server-side rendering.

src/components/controls/Bar.test.tsx

@@ -38,7 +38,7 @@ describe("Bar", () => {
     // check new style is set
     expect(headerComputedStyle.border).toBe(borderStyle);
     // Check default values are still set
-    expect(headerComputedStyle.height).toBe("100%");
+    expect(headerComputedStyle.height).toBe("auto");
   });
 });
 

src/components/controls/Bar.tsx

@@ -26,7 +26,7 @@ const Slot = ({ className, style, children }: SlotProps) => (
 
 const BoxStyled = styled(Box)<BoxProps>(({ theme }) => ({
   width: "100%",
-  height: "100%",
+  height: "auto",
   minHeight: "50px",
   display: "flex",
   alignItems: "center",

src/components/navigation/Navbar.test.tsx

@@ -24,7 +24,7 @@ describe("Navbar", () => {
     expect(headerComputedStyle.border).toBe(borderStyle);
 
     // Check default values are still set
-    expect(headerComputedStyle.height).toBe("100%");
+    expect(headerComputedStyle.height).toBe("auto");
   });
 });