From d9fb9d28aaac0f2bb7c4cd421f4163a6575d570b Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 16 Aug 2024 10:51:13 +0200
Subject: [PATCH] refactor: Update ThemePage component layout for responsive
 design

---
 src/components/theme-page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index de3b801..e536aa8 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -11,8 +11,8 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
   }, []);
 
   return (
-    <div className="mt-56 flex mx-auto items-start">
-      <div className="flex flex-col w-md border-r pr-5 mr-5 w-full md:max-w-sm relative">
+    <div className="mt-56 flex-col lg:flex-row flex mx-auto items-start">
+      <div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative">
         <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>