Changed limit and added scrollbars on details

components/calendar/CalendarEventDetails.vue

@@ -75,7 +75,7 @@ function deployDeleteModal() {
   >
     <div ref="eventDetails" class="grid gap-1">
       <header class="pr-12">
-        <div class="text-lg font-semibold">
+        <div class="mb-2 max-h-24 overflow-y-auto text-lg font-semibold">
           {{ event.title }}
         </div>
 
@@ -100,18 +100,26 @@ function deployDeleteModal() {
 
       <div class="mb-1 space-y-1">
         <template v-if="event.location">
-          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
+          <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
-            <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
+            <div>
-          </p>
+              <PhMapPinArea size="16" weight="fill" />
+            </div>
+            <p class="max-h-12 overflow-y-auto">{{ event.location }}</p>
+          </div>
         </template>
-        <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
+        <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
-          <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
+          <div>
-        </p>
+            <PhAlarm size="16" weight="fill" />
+          </div>
+          <p>{{ dateDifference }}</p>
+        </div>
         <template v-if="dateDuration">
-          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
+          <div class="text-sm italic dark:opacity-75 flex items-center gap-1">
+            <div>
               <PhHourglassMedium size="16" weight="fill" />
-            {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
+            </div>
-          </p>
+            <p>{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}</p>
+          </div>
         </template>
       </div>
 
@@ -134,7 +142,7 @@ function deployDeleteModal() {
       <template v-if="event.description">
         <hr class="border-slate-500 mt-2" >
 
-        <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+        <div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
           {{ event.description }}
         </div>
       </template>

components/calendar/form/UpdateEvent.vue

@@ -104,6 +104,7 @@ function handleCancel() {
                 name="new-event-title"
                 required
                 :placeholder="$t('entity.calendar.event.title')"
+                :maxlength="120"
                 class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
               >
             </div>
@@ -116,6 +117,7 @@ function handleCancel() {
               name="new-event-description"
               :placeholder="$t('entity.addDescription')"
               class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+              :maxlength="1200"
             />
           </div>
 
@@ -170,7 +172,9 @@ function handleCancel() {
                 type="text"
                 name="new-event-location"
                 :placeholder="$t('entity.calendar.event.addLocation')"
-                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+                class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+                :maxlength="160"
+              >
             </div>
           </div>
 

i18n.config.ts

@@ -142,9 +142,9 @@ export default defineI18nConfig(() => ({
             },
             editErrors: {
               toastTitle: "Event wasn't updated.",
-              title_too_big: "Title should be less than 240 characters long.",
+              title_too_big: "Title should be less than 120 characters long.",
               description_too_big: "Description should be less than 1200 characters long.",
-              location_too_big: "Location should be less than 240 characters long.",
+              location_too_big: "Location should be less than 160 characters long.",
             },
             deleteDialog: {
               title: "Delete this event",
@@ -356,9 +356,9 @@ export default defineI18nConfig(() => ({
             },
             editErrors: {
               toastTitle: "L'évènement n'a pas été modifié",
-              title_too_big: "Le titre doit être inférieur à 240 caractères.",
+              title_too_big: "Le titre doit être inférieur à 120 caractères.",
               description_too_big: "La description doit être inférieure à 1200 caractères.",
-              location_too_big: "La localisation doit être inférieure à 240 caractères.",
+              location_too_big: "La localisation doit être inférieure à 160 caractères.",
             },
             deleteDialog: {
               title: "Supprimer l'évènement",

models/CalendarEvent.ts

@@ -20,9 +20,9 @@ export interface CalendarEvent {
  */
 export const postEventBodySchema = z.object({
   event: z.object({
-    title: z.string().max(240),
+    title: z.string().max(120),
     description: z.string().max(1200).optional().nullable(),
-    location: z.string().max(240).optional().nullable(),
+    location: z.string().max(160).optional().nullable(),
     startDate: dateSchema.required(),
     endDate: dateSchema.optional().nullable(),
     hidden: z.boolean().optional().nullable(),

supabase/migrations/202401_init.sql

@@ -92,9 +92,9 @@ comment on table public.calendar_events is 'Events linked to a world';
 alter table public.calendar_events
   add constraint calendar_events_maxlen_check
   check (
-    char_length(title) <= 240 AND
+    char_length(title) <= 120 AND
     (description IS NULL OR char_length(description) <= 1200) AND
-    (location IS NULL OR char_length(location) <= 240)
+    (location IS NULL OR char_length(location) <= 160)
   );
 
 -- Link table for events - categories