fixup: center slider children on x axis

ably · Apr 3, 2024 · 191fdeb · 191fdeb
1 parent e425828
commit 191fdeb
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/core/Slider.tsx b/src/core/Slider.tsx
@@ -76,7 +76,10 @@ const Slider = ({ children, interval = 15000 }: SliderProps) => {
           style={{ transform: `translateX(-${activeIndex * 100}%)` }}
         >
           {children.map((child, index) => (
-            <div key={index} className="w-full flex-shrink-0">
+            <div
+              key={index}
+              className="w-full flex-shrink-0 flex justify-center sm:px-60"
+            >
               {child}
             </div>
           ))}

diff --git a/src/core/Slider/Slider.stories.tsx b/src/core/Slider/Slider.stories.tsx
@@ -4,7 +4,7 @@ import Icon from "../Icon.tsx";
 
 const Slide = ({ name }: { name: string }) => (
   <div className="relative ">
-    <div className="relative mx-auto w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
+    <div className="relative w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
       <div className="w-full md:w-2/3 flex flex-col gap-24 pr-40 md:pr-0 pt-40 pl-40 pb-40 sm:pb-[120px] md:pb-40">
         <h2 className="ui-text-h2 font-medium text-neutral-1000">
           “Ably seamlessly absorbs sudden bursts in load during unexpected