From 3c4462aee9bc42a637a7a28d800cde9e418921a8 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@hotmail.com>
Date: Wed, 11 Dec 2024 14:24:33 +0100
Subject: [PATCH] Fix app buttons clipping with app's content (#5316)

---
 .changeset/shiny-mice-unite.md                    |  5 +++++
 src/components/AppLayout/TopNav/TopNavWrapper.tsx | 11 ++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/shiny-mice-unite.md

diff --git a/.changeset/shiny-mice-unite.md b/.changeset/shiny-mice-unite.md
new file mode 100644
index 00000000000..34ed4b172a3
--- /dev/null
+++ b/.changeset/shiny-mice-unite.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+App buttons no longer clip with app contents
diff --git a/src/components/AppLayout/TopNav/TopNavWrapper.tsx b/src/components/AppLayout/TopNav/TopNavWrapper.tsx
index 6d97179fbbd..b53be6702c4 100644
--- a/src/components/AppLayout/TopNav/TopNavWrapper.tsx
+++ b/src/components/AppLayout/TopNav/TopNavWrapper.tsx
@@ -3,12 +3,13 @@ import React from "react";
 
 import { topBarHeight, topBarHeightSubtitle } from "../consts";
 
-export const TopNavWrapper: React.FC<{ withoutBorder?: boolean; hasSubtitle?: boolean }> = ({
-  children,
-  withoutBorder,
-  hasSubtitle,
-}) => (
+export const TopNavWrapper: React.FC<{
+  withoutBorder?: boolean;
+  hasSubtitle?: boolean;
+}> = ({ children, withoutBorder, hasSubtitle }) => (
   <Box
+    display={hasSubtitle ? "block" : "flex"}
+    alignItems="center"
     paddingX={6}
     paddingY={5}
     borderBottomWidth={withoutBorder ? 0 : 1}