From 61ef19e3119623cbbd6993906023c2a41b537c71 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 24 Aug 2023 14:06:30 +0800
Subject: [PATCH] Improve highlight bar mobile layout

---
 packages/web/components/patterns/HighlightBar.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index dc2e8aa9e..a3aa094a8 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -96,9 +96,10 @@ function BarContent(props: HighlightBarProps): JSX.Element {
       alignment="center"
       css={{
         display: 'flex',
-        padding: props.displayAtBottom ? '10px 15px' : '5px 10px',
-        gap: props.displayAtBottom ? '15px' : '5px',
+        gap: '5px',
+        maxWidth: '100%',
         width: props.displayAtBottom ? '100%' : 'auto',
+        padding: props.displayAtBottom ? '10px 15px' : '5px 10px',
       }}
     >
       {highlightColors.map((color) => {