From 9e7462a77d6f466a413e6a25a40ea4d8ea409245 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Wed, 16 Aug 2023 00:42:35 -0400
Subject: [PATCH] Better layout when no image

---
 src/components/ui/Timeline.astro   |  2 +-
 src/components/widgets/Steps.astro | 67 ++++++++++++++++--------------
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/ui/Timeline.astro b/src/components/ui/Timeline.astro
index bb25330..b393b50 100644
--- a/src/components/ui/Timeline.astro
+++ b/src/components/ui/Timeline.astro
@@ -49,7 +49,7 @@ const {
               )}
             </div>
             <div
-              class={`max-w-md pt-1 ${
+              class={`pt-1 ${
                 index !== items.length - 1 ? "pb-8" : ""
               }`}
             >
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index fde8052..ecc6291 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -1,54 +1,59 @@
 ---
-import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
-import Timeline from "~/components/ui/Timeline.astro";
-import Headline from "~/components/ui/Headline.astro";
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import Timeline from '~/components/ui/Timeline.astro';
+import Headline from '~/components/ui/Headline.astro';
 import Image from '~/components/common/Image.astro';
-import type { Steps } from "~/types";
+import type { Steps } from '~/types';
 
 const {
-  title = await Astro.slots.render("title"),
-  subtitle = await Astro.slots.render("subtitle"),
-  tagline = await Astro.slots.render("tagline"),
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
   items = [],
-  image = await Astro.slots.render("image"),
+  image = await Astro.slots.render('image'),
   isReversed = false,
 
   id,
   isDark = false,
   classes = {},
-  bg = await Astro.slots.render("bg"),
+  bg = await Astro.slots.render('bg'),
 } = Astro.props as Steps;
 ---
 
-<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ""}`} bg={bg}>
-  <div class:list={["flex flex-col gap-8 md:gap-12 md:flex-row", { "md:flex-row-reverse": isReversed }]}>
-    <div class="md:py-4 md:basis-1/2 md:self-center">
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>
+  <div class:list={['flex flex-col gap-8 md:gap-12', { 'md:flex-row-reverse': isReversed }, { 'md:flex-row': image}]}>
+    <div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
       <Headline
         title={title}
         subtitle={subtitle}
         tagline={tagline}
-        classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
+        classes={{
+          container: 'text-left rtl:text-right',
+          title: 'text-3xl lg:text-4xl',
+          ...((classes?.headline as {}) ?? {}),
+        }}
       />
       <Timeline items={items} classes={classes?.items as {}} />
     </div>
-    <div class="relative md:basis-1/2">
-      {
-        image &&
-          (typeof image === 'string' ? (
-            <Fragment set:html={image} />
+    {
+      image && (
+        <div class="relative md:basis-1/2">
+          {(typeof image === 'string' ? (
+          <Fragment set:html={image} />
           ) : (
-            <Image
-              class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
-              widths={[400, 768]}
-              sizes="(max-width: 768px) 100vw, 432px"
-              width={432}
-              height={768}
-              layout="cover"
-              src={image?.src}
-              alt={image?.alt || ""}
-            />
-          ))
-      }
-    </div>
+          <Image
+            class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
+            widths={[400, 768]}
+            sizes="(max-width: 768px) 100vw, 432px"
+            width={432}
+            height={768}
+            layout="cover"
+            src={image?.src}
+            alt={image?.alt || ''}
+          />
+          ))}
+        </div>
+      )
+    }
   </div>
 </WidgetWrapper>