Mobile, and npm audit

Author: AllanKoder

README.md

@@ -182,11 +182,9 @@ Xdebug is pre-configured in the Sail Docker environment for local debugging.
    - Start the "Listen for Xdebug" configuration in VS Code.
    - Trigger a request (web, test, or CLI) and Xdebug will connect to VS Code.
 
+## Deployment
 
-## Documentation
-
-- [Project Roadmap](docs/ROADMAP.md): See the planned phases and milestones for the project.
-- [Application Routes & UI Previews](docs/ROUTES.md): Browse all main routes and their associated UI images.
+`ansible-playbook -i ./ansible/inventory/production.ini deploy.yml`
 
 ## License
 

package-lock.json

@@ -25,9 +25,36 @@ const emit = defineEmits(["upvote", "downvote"]);
     <div
         class="rounded-sm border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 shadow-sm overflow-hidden transition-shadow hover:shadow-md"
     >
-        <div class="flex gap-3 p-4">
-            <!-- Vote section -->
-            <div class="flex flex-col items-center gap-1 pt-1 my-auto">
+        <div class="flex flex-col sm:flex-row gap-3 p-3 sm:p-4">
+            <!-- Mobile: Image and Vote Row -->
+            <div class="flex sm:hidden gap-6 items-start">
+                <!-- Vote section (mobile) -->
+                <div class="flex flex-col items-center gap-1">
+                    <Upvotable
+                        :upvotable-id="resource.id"
+                        :upvotable-key="'resource'"
+                        :initial-votes="resource.vote_score"
+                        :user-vote="resource.user_vote"
+                        class="flex flex-col items-center"
+                    />
+                </div>
+
+                <!-- Image section (mobile) -->
+                <div class="shrink-0">
+                    <ClickableImage
+                        :href="route('resources.show', { slug: resource.slug })"
+                    >
+                        <ResourceThumbnail
+                            :src="resource.image_url"
+                            :alt="resource.name"
+                        />
+                    </ClickableImage>
+                </div>
+
+            </div>
+
+            <!-- Desktop: Vote section -->
+            <div class="hidden sm:flex flex-col items-center gap-1 pt-1 my-auto">
                 <Upvotable
                     :upvotable-id="resource.id"
                     :upvotable-key="'resource'"
@@ -37,8 +64,8 @@ const emit = defineEmits(["upvote", "downvote"]);
                 />
             </div>
 
-            <!-- Image section -->
-            <div class="shrink-0 my-auto mr-4">
+            <!-- Desktop: Image section -->
+            <div class="hidden sm:block shrink-0 my-auto mr-4">
                 <ClickableImage
                     :href="route('resources.show', { slug: resource.slug })"
                 >

resources/js/Components/Resources/ResourceCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+t <script setup>
 import { defineProps } from "vue";
 import { Icon } from "@iconify/vue";
 import StarRating from "@/Components/StarRating/StarRating.vue";

resources/js/Components/Resources/ResourceDetailedRatings.vue

@@ -20,11 +20,31 @@ const props = defineProps({
 <template>
     <!-- Header Section -->
     <div
-        class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-sm shadow-sm px-4 py-4"
+        class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-sm shadow-sm px-3 sm:px-4 py-3 sm:py-4"
     >
-        <div class="flex items-start gap-4">
-            <!-- Image Section -->
-            <div class="shrink-0 flex flex-row my-auto gap-3">
+        <div class="flex flex-col sm:flex-row items-start gap-3 sm:gap-4">
+            <!-- Mobile: Image and Vote Row -->
+            <div class="flex sm:hidden gap-3 items-start w-full">
+                <!-- Thumbnail -->
+                <div class="shrink-0">
+                    <ResourceThumbnail
+                        :src="props.resource.image_url"
+                        :alt="props.resource.name"
+                    />
+                </div>
+
+                <!-- Vote Section (mobile) -->
+                <UpvoteResource
+                    :upvotable-id="props.resource.id"
+                    :upvotable-key="'resource'"
+                    :initial-votes="props.resource.vote_score"
+                    :user-vote="props.resource.user_vote"
+                    class="flex flex-col pt-1"
+                />
+            </div>
+
+            <!-- Desktop: Image Section -->
+            <div class="hidden sm:flex shrink-0 flex-row my-auto gap-3">
                 <!-- Vote Section -->
                 <UpvoteResource
                     :upvotable-id="props.resource.id"
@@ -40,7 +60,7 @@ const props = defineProps({
             </div>
 
             <!-- Content -->
-            <div class="flex-1 min-w-0">
+            <div class="flex-1 min-w-0 w-full sm:w-auto">
                 <!-- Title -->
                 <h1
                     class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 text-balance"