Various front-end fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Account/ActorCard.vue

@@ -6,7 +6,7 @@
     <div class="flex pl-2">
       <figure class="w-12 h-12" v-if="actor.avatar">
         <img
-          class="rounded-lg"
+          class="rounded-full object-cover h-full"
           :src="actor.avatar.url"
           alt=""
           width="48"

js/src/components/Discussion/DiscussionComment.vue

@@ -146,7 +146,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "deleteComment"]);
 
-const { t } = useI18n({useScope: 'global'});
+const { t } = useI18n({ useScope: "global" });
 
 const comment = computed(() => props.modelValue);
 

js/src/components/Group/GroupCard.vue

@@ -2,7 +2,7 @@
   <LinkOrRouterLink
     :to="to"
     :isInternal="isInternal"
-    class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg my-4 flex items-center flex-col"
+    class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col"
     :class="{
       'sm:flex-row': mode === 'row',
       'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',

js/src/components/NavBar.vue

@@ -77,9 +77,9 @@
             >
               <div class="flex gap-1 items-center">
                 <div class="flex-none">
-                  <figure class="" v-if="identity.avatar">
+                  <figure class="h-8 w-8" v-if="identity.avatar">
                     <img
-                      class="rounded-full h-8 w-8"
+                      class="rounded-full object-cover h-full"
                       loading="lazy"
                       :src="identity.avatar.url"
                       alt=""

js/src/components/TextEditor.vue

@@ -238,7 +238,7 @@ import FormatListNumbered from "vue-material-design-icons/FormatListNumbered.vue
 import FormatQuoteClose from "vue-material-design-icons/FormatQuoteClose.vue";
 import Undo from "vue-material-design-icons/Undo.vue";
 import Redo from "vue-material-design-icons/Redo.vue";
-import Placeholder from '@tiptap/extension-placeholder'
+import Placeholder from "@tiptap/extension-placeholder";
 
 const props = withDefaults(
   defineProps<{
@@ -332,8 +332,8 @@ const editor = useEditor({
       submit: () => emit("submit"),
     }),
     Placeholder.configure({
-      placeholder: props.placeholder ?? t('Write something')
-    })
+      placeholder: props.placeholder ?? t("Write something"),
+    }),
   ],
   injectCSS: false,
   content: props.modelValue,

js/src/views/Admin/DashboardView.vue

@@ -66,12 +66,18 @@
       </div>
       <div class="flex flex-wrap gap-4">
         <div>
-          <h2>{{ t('Last published event')}}</h2>
-          <event-card v-if="dashboard?.lastPublicEventPublished" :event="dashboard?.lastPublicEventPublished" />
+          <h2>{{ t("Last published event") }}</h2>
+          <event-card
+            v-if="dashboard?.lastPublicEventPublished"
+            :event="dashboard?.lastPublicEventPublished"
+          />
         </div>
         <div>
-          <h2>{{ t('Last group created')}}</h2>
-          <group-card v-if="dashboard?.lastGroupCreated" :group="dashboard?.lastGroupCreated" />
+          <h2>{{ t("Last group created") }}</h2>
+          <group-card
+            v-if="dashboard?.lastGroupCreated"
+            :group="dashboard?.lastGroupCreated"
+          />
         </div>
       </div>
     </section>

js/src/views/Event/EventView.vue

@@ -110,9 +110,7 @@
       <div
         class="rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse gap-4"
       >
-        <aside
-          class="rounded bg-white dark:bg-gray-600 shadow-md h-min"
-        >
+        <aside class="rounded bg-white dark:bg-gray-600 shadow-md h-min">
           <div class="sticky p-4">
             <event-metadata-sidebar
               v-if="event"
@@ -123,7 +121,9 @@
           </div>
         </aside>
         <div class="flex-1">
-          <section class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4">
+          <section
+            class="event-description bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded mb-4"
+          >
             <h2 class="text-2xl">{{ t("About this event") }}</h2>
             <p v-if="!event?.description">
               {{ t("The event organizer didn't add any description.") }}
@@ -146,7 +146,10 @@
               :metadata="metadata"
             />
           </section>
-          <section class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4" ref="commentsObserver">
+          <section
+            class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4"
+            ref="commentsObserver"
+          >
             <a href="#comments">
               <h2 class="text-xl" id="comments">{{ t("Comments") }}</h2>
             </a>
@@ -155,7 +158,10 @@
         </div>
       </div>
 
-      <section class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4" v-if="(event?.relatedEvents ?? []).length > 0">
+      <section
+        class="bg-white dark:bg-zinc-700 px-3 pt-1 pb-3 rounded my-4"
+        v-if="(event?.relatedEvents ?? []).length > 0"
+      >
         <h2 class="text-2xl mb-2">
           {{ t("These events may interest you") }}
         </h2>
@@ -493,7 +499,6 @@ useHead({
 });
 </script>
 <style>
-
 .event-description a {
   @apply inline-block p-1 bg-mbz-yellow-alt-200 text-black;
 }

js/src/views/Group/GroupMembers.vue

@@ -112,9 +112,9 @@
           v-slot="props"
         >
           <article class="flex">
-            <figure v-if="props.row.actor.avatar">
+            <figure v-if="props.row.actor.avatar" class="h-10 w-10">
               <img
-                class="rounded"
+                class="rounded-full object-cover h-full"
                 :src="props.row.actor.avatar.url"
                 :alt="props.row.actor.avatar.alt || ''"
                 height="48"