@@ -138,7 +138,6 @@ export default function EventDetailPage() {
138138 </ Head >
139139
140140 < div className = "min-h-screen bg-white" >
141- { /* Breadcrumb */ }
142141 < div className = "bg-white " >
143142 < div className = "container mx-auto px-4 py-4" >
144143 < nav className = "flex items-center gap-2 text-sm" >
@@ -169,9 +168,7 @@ export default function EventDetailPage() {
169168 </ div >
170169
171170 < div className = "container mx-auto px-4 py-8" >
172- { /* Title and Date Row */ }
173171 < div className = "flex flex-col md:flex-row md:items-start md:justify-between gap-6 mb-8" >
174- { /* Title and Description */ }
175172 < div className = "flex-1" >
176173 < h1 className = "text-3xl md:text-4xl font-bold text-gray-900 mb-4" >
177174 { event . title }
@@ -212,37 +209,44 @@ export default function EventDetailPage() {
212209 </ div >
213210 ) }
214211
215- < div className = "flex flex-wrap md :flex-nowrap items-start justify-between gap-6 md:gap-8 mb-8 py-8 border-b" >
216- < div className = "flex items-start gap-3" >
217- < Clock size = { 20 } className = "text-gray-400 mt-0.5" />
218- < div >
212+ < div className = "flex flex-wrap lg :flex-nowrap items-start justify-between gap-6 mb-8 py-8 border-b" >
213+ < div className = "flex items-start gap-3 flex-1 basis-full sm:basis-1/2 lg:basis-0 " >
214+ < Clock size = { 20 } className = "text-gray-400 mt-0.5 flex-shrink-0 " />
215+ < div className = "min-w-0" >
219216 < p className = "text-sm text-black mb-1" > Time</ p >
220- < p className = "font-medium text-gray-900" > { formatEventTime ( ) } </ p >
217+ < p className = "font-medium text-gray-900 break-words" >
218+ { formatEventTime ( ) }
219+ </ p >
221220 </ div >
222221 </ div >
223222
224- < div className = "flex items-start gap-3" >
225- < MapPin size = { 20 } className = "text-gray-400 mt-0.5" />
226- < div >
223+ < div className = "flex items-start gap-3 flex-1 basis-full sm:basis-1/2 lg:basis-0" >
224+ < MapPin
225+ size = { 20 }
226+ className = "text-gray-400 mt-0.5 flex-shrink-0"
227+ />
228+ < div className = "min-w-0" >
227229 < p className = "text-sm text-black mb-1" > Location</ p >
228- < p className = "font-medium text-gray-900" >
230+ < p className = "font-medium text-gray-900 break-words " >
229231 { event . address ||
230232 'Isiolo Resort Conference Hall, Isiolo Town, Isiolo County, Kenya' }
231233 </ p >
232234 </ div >
233235 </ div >
234236
235- < div className = "flex items-start gap-3" >
236- < Users size = { 20 } className = "text-black mt-0.5" />
237- < div >
237+ < div className = "flex items-start gap-3 flex-1 basis-full sm:basis-1/2 lg:basis-0 " >
238+ < Users size = { 20 } className = "text-gray-400 mt-0.5 flex-shrink-0 " />
239+ < div className = "min-w-0" >
238240 < p className = "text-sm text-black mb-1" > Type of event</ p >
239- < p className = "font-medium text-gray-900" > { event . eventType } </ p >
241+ < p className = "font-medium text-gray-900 break-words" >
242+ { event . eventType }
243+ </ p >
240244 </ div >
241245 </ div >
242246
243- < div className = "flex items-start gap-3" >
247+ < div className = "flex items-start gap-3 flex-1 basis-full sm:basis-1/2 lg:basis-0 " >
244248 < svg
245- className = "w-5 h-5 text-gray-400 mt-0.5"
249+ className = "w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0 "
246250 fill = "none"
247251 stroke = "currentColor"
248252 viewBox = "0 0 24 24"
@@ -254,13 +258,15 @@ export default function EventDetailPage() {
254258 d = "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
255259 />
256260 </ svg >
257- < div >
261+ < div className = "min-w-0" >
258262 < p className = "text-sm text-black mb-1" > Hosted by</ p >
259- < p className = "font-medium text-gray-900" > { event . host } </ p >
263+ < p className = "font-medium text-gray-900 break-words" >
264+ { event . host }
265+ </ p >
260266 </ div >
261267 </ div >
262268
263- < div >
269+ < div className = "flex items-start justify-start lg:justify-end flex-1 basis-full sm:basis-1/2 lg:basis-0" >
264270 < Button onClick = { handleShare } >
265271 < Share2 size = { 16 } className = "mr-1" />
266272 < span className = "font-medium" > Share</ span >
0 commit comments