fix(SaleHeaderBanner): add flex wrapper to banner to fix layout issue

PhillipsAuctionHouse · Nov 25, 2024 · 557a96d · 557a96d
1 parent 5112f2d
commit 557a96d
Showing 1 changed file with 38 additions and 35 deletions.
diff --git a/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx b/src/patterns/SaleHeaderBanner/SaleHeaderBanner.tsx
@@ -82,44 +82,47 @@ const SaleHeaderBanner = forwardRef<HTMLDivElement, SaleHeaderBannerProps>(
     const isOpenForBidding = auctionState === AuctionStatus.live;
     const isClosed = auctionState === AuctionStatus.past;
     const showCountdown = isOpenForBidding && auctionEndTime;
+
     return (
-      <div {...commonProps} className={classnames(baseClassName, className)} {...props} ref={ref}>
-        <SeldonImage
-          aspectRatio="16/9"
-          src={imageSrcUrl}
-          alt={String(auctionTitle)}
-          objectFit="cover"
-          className={`${baseClassName}__image`}
-        />
-        <PageMargin className={`${baseClassName}__stack-wrapper`} {...commonProps} {...props} ref={ref}>
-          {showCountdown && (
-            <Countdown endDateTime={new Date(auctionEndTime)} className={`${baseClassName}__countdown`} />
-          )}
-          <div className={`${baseClassName}__stack`}>
-            {isOpenForBidding && children}
-            <Text variant={TextVariants.title1}>{auctionTitle}</Text>
-            <Text variant={TextVariants.string2} className={`${baseClassName}__location`}>
-              {location}
-            </Text>
-            <div className={`${baseClassName}__occurrence-details`}>
-              {occurrenceInformation.map(({ date, occurrenceLabel }) => (
-                <div className={`${baseClassName}__occurrence-details-text`} key={String(date)}>
-                  <Text variant={TextVariants.string2}>{occurrenceLabel}</Text>
-                  <Text variant={TextVariants.string2} className={`${baseClassName}__date`}>
-                    {date}
-                  </Text>
-                </div>
-              ))}
+      <div className={`${baseClassName}__wrapper`}>
+        <div {...commonProps} className={classnames(baseClassName, className)} {...props} ref={ref}>
+          <SeldonImage
+            aspectRatio="16/9"
+            src={imageSrcUrl}
+            alt={String(auctionTitle)}
+            objectFit="cover"
+            className={`${baseClassName}__image`}
+          />
+          <PageMargin className={`${baseClassName}__stack-wrapper`} {...commonProps} {...props} ref={ref}>
+            {showCountdown && (
+              <Countdown endDateTime={new Date(auctionEndTime)} className={`${baseClassName}__countdown`} />
+            )}
+            <div className={`${baseClassName}__stack`}>
+              {isOpenForBidding && children}
+              <Text variant={TextVariants.title1}>{auctionTitle}</Text>
+              <Text variant={TextVariants.string2} className={`${baseClassName}__location`}>
+                {location}
+              </Text>
+              <div className={`${baseClassName}__occurrence-details`}>
+                {occurrenceInformation.map(({ date, occurrenceLabel }) => (
+                  <div className={`${baseClassName}__occurrence-details-text`} key={String(date)}>
+                    <Text variant={TextVariants.string2}>{occurrenceLabel}</Text>
+                    <Text variant={TextVariants.string2} className={`${baseClassName}__date`}>
+                      {date}
+                    </Text>
+                  </div>
+                ))}
 
-              {isClosed && children}
+                {isClosed && children}
+              </div>
+              {!isClosed && (
+                <Button className={`${baseClassName}__cta`} onClick={onClick}>
+                  {ctaLabel}
+                </Button>
+              )}
             </div>
-            {!isClosed && (
-              <Button className={`${baseClassName}__cta`} onClick={onClick}>
-                {ctaLabel}
-              </Button>
-            )}
-          </div>
-        </PageMargin>
+          </PageMargin>
+        </div>
       </div>
     );
   },