UI: Make banner width match content + round corners

Author: ianhi

src/components/banner.js

@@ -5,6 +5,7 @@ import {
   AlertTitle,
   Box,
   CloseButton,
+  Container,
   useDisclosure,
 } from '@chakra-ui/react'
 
@@ -16,34 +17,41 @@ export const Banner = ({ title, description, children }) => {
   } = useDisclosure({ defaultIsOpen: true })
 
   return isVisible ? (
-    <Box pt={16} px={20}>
-      <Alert
-        status='info'
-        variant='solid'
-        alignItems='flex-start' // Align icon nicely with multi-line text
-      >
-        <AlertIcon />
-        <Box flex='1' ml={3}>
-          {' '}
-          {/* Container for text content, allows vertical flow */}
-          <AlertTitle>{title}</AlertTitle>
-          {description && (
-            <AlertDescription mt={1}>{description}</AlertDescription>
-          )}
-          <Box mt={2}>
+    <Box pt={16}>
+      {' '}
+      {/* This Box provides top padding to clear the header */}
+      <Container maxW='container.lg'>
+        {' '}
+        {/* Constrains the width of the banner */}
+        <Alert
+          status='info'
+          variant='solid'
+          alignItems='flex-start' // Align icon nicely with multi-line text
+          borderRadius='md' // Added rounded corners
+        >
+          <AlertIcon />
+          <Box flex='1' ml={3}>
             {' '}
-            {/* Wrapper for children, e.g., links */}
-            {children}
+            {/* Container for text content, allows vertical flow */}
+            <AlertTitle>{title}</AlertTitle>
+            {description && (
+              <AlertDescription mt={1}>{description}</AlertDescription>
+            )}
+            <Box mt={2}>
+              {' '}
+              {/* Wrapper for children, e.g., links */}
+              {children}
+            </Box>
           </Box>
-        </Box>
-        <CloseButton
-          position='absolute' // Position absolutely within the Alert
-          alignSelf='flex-start'
-          right='8px' // Adjust as needed
-          top='8px' // Adjust as needed
-          onClick={onClose}
-        />
-      </Alert>
+          <CloseButton
+            position='absolute' // Position absolutely within the Alert
+            alignSelf='flex-start'
+            right='8px' // Adjust as needed
+            top='8px' // Adjust as needed
+            onClick={onClose}
+          />
+        </Alert>
+      </Container>
     </Box>
   ) : (
     <></>