style: responsiveness tweaks

src/components/AppContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="shadow-lg rounded-2xl bg-slate-200 dark:bg-slate-800 scrollbar-thin dark:scrollbar-thumb-blue-800 dark:hover:scrollbar-thumb-blue-900 dark:scrollbar-track-gray-500 scrollbar-thumb-blue-500 hover:scrollbar-thumb-blue-600 scrollbar-track-gray-400 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scroll-gutter-stable scroll-smooth"
+    class="shadow-lg rounded-2xl bg-slate-200 dark:bg-slate-800 md:scrollbar-thin dark:scrollbar-thumb-blue-800 dark:hover:scrollbar-thumb-blue-900 dark:scrollbar-track-gray-500 scrollbar-thumb-blue-500 hover:scrollbar-thumb-blue-600 scrollbar-track-gray-400 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scroll-gutter-stable scroll-smooth"
   >
     <slot />
   </div>

src/components/toast/ToastAlert.vue

@@ -29,7 +29,7 @@ const toastProps = computed(() => TOAST_TYPES_MAP[props.type])
 
 <template>
   <div
-    class="alert shadow-xl rounded-lg mb-3 whitespace-nowrap p-4"
+    class="alert shadow-xl rounded-md md:rounded-lg mb-2 md:mb-3 whitespace-nowrap p-2 md:p-4 flex flex-nowrap"
     :class="toastProps.className"
   >
     <FWIcon

src/components/toast/ToastComponent.vue

@@ -12,7 +12,7 @@ const toasts = computed(() => toastStore.toasts)
 <template>
   <TransitionGroup
     tag="div"
-    class="absolute top-3 right-3 z-50"
+    class="absolute right-2 top-2 md:top-3 md:right-3 z-50"
     name="toast"
   >
     <ToastAlert

src/views/profile/partials/ProfileHeader.vue

@@ -45,7 +45,7 @@ defineProps<ProfileHeaderProps>()
           ({{ user.login }})
         </div>
       </div>
-      <div class="flex overflow-auto gap-8 text-xs md:text-sm">
+      <div class="flex overflow-auto gap-8 text-xs md:text-sm py-4 md:py-4">
         <ProfileBadge
           icon="fa-solid fa-users"
           label="Seguidores:"