From 1abe2a31f4e00f05e633c01ce9cf40eee0432ffd Mon Sep 17 00:00:00 2001
From: James Gilbert <james.gilbert@diamond.ac.uk>
Date: Mon, 10 Nov 2025 14:02:18 +0000
Subject: [PATCH] Change Bar height to auto

---
 changelog.md                              | 1 +
 src/components/controls/Bar.test.tsx      | 2 +-
 src/components/controls/Bar.tsx           | 2 +-
 src/components/navigation/Navbar.test.tsx | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index e03acfa..abce36d 100644
--- a/changelog.md
+++ b/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.
diff --git a/src/components/controls/Bar.test.tsx b/src/components/controls/Bar.test.tsx
index c35c006..66f15cb 100644
--- a/src/components/controls/Bar.test.tsx
+++ b/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");
   });
 });
 
diff --git a/src/components/controls/Bar.tsx b/src/components/controls/Bar.tsx
index 2ece143..8f909ec 100644
--- a/src/components/controls/Bar.tsx
+++ b/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",
diff --git a/src/components/navigation/Navbar.test.tsx b/src/components/navigation/Navbar.test.tsx
index b4d15c6..0c677c5 100644
--- a/src/components/navigation/Navbar.test.tsx
+++ b/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");
   });
 });