From 70b10bbd5644f74e79fba01867bd143070a593b6 Mon Sep 17 00:00:00 2001
From: zmeyer44 <zmmeyer44@gmail.com>
Date: Thu, 2 Nov 2023 16:03:21 -0400
Subject: [PATCH] small collapsing improvments

---
 app/(app)/event/[naddr]/_components/Header.tsx | 6 +++---
 components/EventIcons/DateIcon.tsx             | 2 +-
 components/EventIcons/LocationIcon.tsx         | 2 +-
 components/Modals/CreateCalendarEvent.tsx      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/(app)/event/[naddr]/_components/Header.tsx b/app/(app)/event/[naddr]/_components/Header.tsx
index 7e4188b..d0495db 100644
--- a/app/(app)/event/[naddr]/_components/Header.tsx
+++ b/app/(app)/event/[naddr]/_components/Header.tsx
@@ -218,13 +218,13 @@ export default function Header({ event }: { event: NDKEvent }) {
               {!!location && (
                 <div className="flex flex-1 items-center gap-3">
                   <LocationIcon />
-                  <div className="">
+                  <div className="overflow-hidden">
                     {location.length > 2 ? (
                       <>
-                        <p className="text-bold text-sm @xl:text-base">
+                        <p className="text-bold line-clamp-2 text-sm @xl:text-base">
                           {location[1]}
                         </p>
-                        <p className="text-xs text-muted-foreground @xl:text-sm">
+                        <p className="line-clamp-2 text-xs text-muted-foreground @xl:text-sm">
                           {location[2]}
                         </p>
                       </>
diff --git a/components/EventIcons/DateIcon.tsx b/components/EventIcons/DateIcon.tsx
index 0c7d4e2..2267975 100644
--- a/components/EventIcons/DateIcon.tsx
+++ b/components/EventIcons/DateIcon.tsx
@@ -5,7 +5,7 @@ type SmallCalendarIconProps = {
 };
 export default function SmallCalendarIcon({ date }: SmallCalendarIconProps) {
   return (
-    <div className="center h-10 w-10 overflow-hidden rounded-sm border bg-background text-muted-foreground">
+    <div className="center h-10 w-10 shrink-0 overflow-hidden rounded-sm border bg-background text-muted-foreground">
       <div className="w-full text-center">
         <div className="bg-muted p-[2px] text-[10px] font-semibold uppercase">
           {formatDate(date, "MMM")}
diff --git a/components/EventIcons/LocationIcon.tsx b/components/EventIcons/LocationIcon.tsx
index eb4e0e6..a6d1d3b 100644
--- a/components/EventIcons/LocationIcon.tsx
+++ b/components/EventIcons/LocationIcon.tsx
@@ -2,7 +2,7 @@ import { HiOutlineMapPin } from "react-icons/hi2";
 
 export default function LocationIcon() {
   return (
-    <div className="center h-10 w-10 overflow-hidden rounded-sm border bg-muted text-muted-foreground">
+    <div className="center h-10 w-10 shrink-0 overflow-hidden rounded-sm border bg-muted text-muted-foreground">
       <div className="center w-full text-center">
         <div className="text-center text-[14px] font-medium">
           <HiOutlineMapPin className="h-5 w-5" />
diff --git a/components/Modals/CreateCalendarEvent.tsx b/components/Modals/CreateCalendarEvent.tsx
index f29eca5..2bef5c4 100644
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/components/Modals/CreateCalendarEvent.tsx
@@ -232,7 +232,7 @@ export default function CreateCalendarEventModal({
             <div className="shrink-0">
               <SmallCalendarIcon date={startDate ?? new Date()} />
             </div>
-            <div className="flex-1 shrink-0 divide-y overflow-hidden rounded-md bg-muted sm:max-w-[300px]">
+            <div className="flex-1 shrink-0 divide-y overflow-hidden rounded-md bg-muted sm:min-w-[300px] sm:max-w-[300px]">
               <div className="flex justify-between p-0.5 px-2 pl-3">
                 <div className="flex w-[50px] items-center">Start</div>
                 <div className="flex-1 shrink-0">