Web 44 - fixed header/footer for overflowing issues

Author: wlenig

sga-puck/components/puck/Footer.tsx

@@ -52,7 +52,9 @@ export const Footer: React.FC<FooterProps> = ({
     mediaInquiriesEmail,
     mediaInquiriesLabel,
 }) => (
-    <footer className="bg-black relative bottom-0 left-0 w-screen text-center overflow-hidden mx-0 px-0">
+    <footer className="bg-black w-full text-center overflow-x-hidden">
+        <div className="max-w-7xl mx-auto px-6 text-center">
+
         {showActionButtons && (
             <div className="flex justify-center items-center pt-10 gap-5">
                 <button className="button bg-black text-white border-2 p-5 border-white transition-all duration-350 ease-in-out hover:bg-white hover:text-black">{actionButton1Text}</button>
@@ -62,7 +64,7 @@ export const Footer: React.FC<FooterProps> = ({
         )}
 
         {showSocialMedia && (
-            <div className="flex justify-center items-center gap-5 py-6">
+            <div className="flex flex-wrap justify-center items-center gap-8 py-6 px-4">
                 <div className="flex flex-col items-center px-5">
                     <p className="text-white font-light pb-3">{socialMedia1Label}</p>
                     {socialMedia1LogoSrc ? (
@@ -93,23 +95,24 @@ export const Footer: React.FC<FooterProps> = ({
         <div className="pb-10">
             <p className="text-white font-light pb-4">{organizationName}</p>
             <p className="text-white font-light pb-4">{organizationAddress}</p>
-            <p className="text-white font-light pb-4">{webmasterLabel}&nbsp;
+            <p className="text-white font-light pb-4 break-words">{webmasterLabel}&nbsp;
                 <a
                     href={`mailto:${webmasterEmail}`}
-                    className="underline text-white font-light hover:text-gray-300"
+                    className="underline text-white font-light hover:text-gray-300 wrap-break-word"
                 >
                     {webmasterEmail}
                 </a>
             </p>
-            <p className="text-white font-light pb-4">{mediaInquiriesLabel}&nbsp;
+            <p className="text-white font-light pb-4 break-words">{mediaInquiriesLabel}&nbsp;
                 <a
                     href={`mailto:${mediaInquiriesEmail}`}
-                    className="underline text-white font-light hover:text-gray-300 transition duration-300"
+                    className="underline text-white font-light hover:text-gray-300 transition duration-300 wrap-break-word"
                 >
                     {mediaInquiriesEmail}
                 </a>
             </p>
         </div>
+        </div>
     </footer>
 );
 

sga-puck/components/puck/HeaderContent.tsx

@@ -33,18 +33,18 @@ export const HeaderContent: React.FC<HeaderContentProps> = ({
     dividerHeight,
     dividerMargin
 }) => (
-    <div className="relative w-screen">
+    <div className="relative w-full overflow-x-hidden">
         <header
-            className={`flex flex-col justify-center items-center h-auto w-screen relative top-0 ${padding}`}
+            className={`flex flex-col justify-center items-center h-auto w-full relative ${padding}`}
             style={{ backgroundColor }}
         >
-            <div className="flex items-center">
+            <div className="flex flex-wrap items-center justify-center gap-4 text-center max-w-full">
                 <h1 className={`${titleSize} font-bold ${titleColor} text-center`}>
                     {titleText}
                 </h1>
-                <div className={`inline-block ${dividerHeight} min-h-[1em] ${dividerWidth} self-stretch ${dividerColor} ${dividerMargin}`}></div>
+                <div className={` ${dividerHeight} ${dividerWidth} ${dividerColor} ${dividerMargin} shrink-0`}></div>
                 {logoSrc ? (
-                    <img src={logoSrc} alt={logoAltText} className={`${logoWidth} ${logoHeight}`} />
+                    <img src={logoSrc} alt={logoAltText} className={`${logoWidth} ${logoHeight} object-contain`} />
                 ) : (
                     <div className="text-white font-semibold">Header</div>
                 )}
@@ -91,6 +91,7 @@ export const HeaderContentConfig: ComponentConfig<HeaderContentProps> = {
         logoWidth: {
             type: "select",
             options: [
+                { label: "Responsive (Mobile to Desktop)", value: "w-24 sm:w-32 md:w-40 lg:w-48 xl:w-52" },
                 { label: "Small (w-32)", value: "w-32" },
                 { label: "Medium (w-40)", value: "w-40" },
                 { label: "Large (w-48)", value: "w-48" },
@@ -102,6 +103,7 @@ export const HeaderContentConfig: ComponentConfig<HeaderContentProps> = {
             type: "select",
             options: [
                 { label: "Auto", value: "h-auto" },
+                { label: "Responsive (Mobile to Desktop)", value: "sm:h-16 md:h-20 lg:h-24 xl:h-32" },
                 { label: "Small (h-16)", value: "h-16" },
                 { label: "Medium (h-20)", value: "h-20" },
                 { label: "Large (h-24)", value: "h-24" },
@@ -154,7 +156,7 @@ export const HeaderContentConfig: ComponentConfig<HeaderContentProps> = {
         titleColor: "text-sga-red",
         logoSrc: "",
         logoAltText: "SGA Logo",
-        logoWidth: "w-52",
+        logoWidth: "w-24 sm:w-32 md:w-40 lg:w-48 xl:w-52",
         logoHeight: "h-auto",
         dividerColor: "bg-black",
         dividerWidth: "w-1",

sga-puck/components/puck/Navigation.tsx

@@ -40,7 +40,7 @@ export const Navigation: React.FC<NavigationProps> = ({
                                             absolute left-0 
                                             md:left-auto
                                             md:right-0
-                                            z-10 w-auto origin-top-right rounded-md bg-black ring-1 shadow-lg ring-black/5
+                                            z-50 w-auto origin-top-right rounded-md bg-black ring-1 shadow-lg ring-black/5
                             ">
                                 <div className="py-1">
                                     {group.items.map((item, itemIdx) => (