From 9ea7fd9e7f5004aa1ecd13bac572e4b15dcc1932 Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Fri, 25 Aug 2023 22:25:55 -0400
Subject: [PATCH] fix inconsistent header bar heights

---
 src/components/ChannelHeader.tsx            | 10 ++--------
 src/components/SectionHeader.tsx            | 11 +++++++++++
 src/components/messaging/MessagesHeader.tsx |  8 ++------
 3 files changed, 15 insertions(+), 14 deletions(-)
 create mode 100644 src/components/SectionHeader.tsx

diff --git a/src/components/ChannelHeader.tsx b/src/components/ChannelHeader.tsx
index f11f502..a426844 100644
--- a/src/components/ChannelHeader.tsx
+++ b/src/components/ChannelHeader.tsx
@@ -5,19 +5,13 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { ContextMenuContext } from "../contexts/ContextMenuContext";
 import { useAppStore } from "../stores/AppStore";
-import Container from "./Container";
 import { IContextMenuItem } from "./ContextMenuItem";
 import Icon from "./Icon";
+import { SectionHeader } from "./SectionHeader";
 import LeaveServerModal from "./modals/LeaveServerModal";
 
-const Wrapper = styled(Container)`
-	display: flex;
-	padding: 12px 16px;
-	margin-bottom: 1px;
+const Wrapper = styled(SectionHeader)`
 	background-color: var(--background-secondary);
-	box-shadow: 0 1px 0 hsl(0deg 0% 0% / 0.3);
-	align-items: center;
-	justify-content: space-between;
 	cursor: pointer;
 
 	&:hover {
diff --git a/src/components/SectionHeader.tsx b/src/components/SectionHeader.tsx
new file mode 100644
index 0000000..6d0bb8b
--- /dev/null
+++ b/src/components/SectionHeader.tsx
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const SectionHeader = styled.div`
+	display: flex;
+	padding: 12px 16px;
+	margin-bottom: 1px;
+	box-shadow: 0 1px 0 hsl(0deg 0% 0% / 0.3);
+	align-items: center;
+	justify-content: space-between;
+	white-space: nowrap;
+`;
diff --git a/src/components/messaging/MessagesHeader.tsx b/src/components/messaging/MessagesHeader.tsx
index 5e4d9be..705206e 100644
--- a/src/components/messaging/MessagesHeader.tsx
+++ b/src/components/messaging/MessagesHeader.tsx
@@ -2,6 +2,7 @@ import * as Icons from "@mdi/js";
 import styled from "styled-components";
 import Channel from "../../stores/objects/Channel";
 import Icon from "../Icon";
+import { SectionHeader } from "../SectionHeader";
 import Tooltip from "../Tooltip";
 
 const IconButton = styled.button`
@@ -27,13 +28,8 @@ const CustomIcon = styled(Icon)<CustomIconProps>`
 	}
 `;
 
-const Container = styled.section`
-	display: flex;
-	padding: 10px 16px;
-	margin-bottom: 1px;
+const Container = styled(SectionHeader)`
 	background-color: var(--background-primary-alt);
-	box-shadow: 0 1px 0 hsl(0deg 0% 0% / 0.3);
-	align-items: center;
 `;
 
 const Wrapper = styled.div`