cleanup of styling

resources/js/views/File.vue

@@ -10,8 +10,9 @@
         <div
             class="max-w-2xl mx-auto border-1 bg-white rounded-xl mt-7xl text-gray-5 px-12 py-8">
             <h3 class="mb-4">Password Required</h3>
-            <p class="mb-2">
-                This file requires a password before it can be viewed
+            <p class="mb-2 text-sm">
+                The file <strong>{{ fileName }}</strong> requires a password
+                before you can view it:
             </p>
             <SMInput
                 class="mb-4"
@@ -22,7 +23,7 @@
             <div class="flex flex-justify-end">
                 <input
                     type="submit"
-                    class="font-medium px-6 py-3.1 rounded-2 hover:shadow-md text-lg transition bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
+                    class="font-medium block w-full md:inline-block md:w-auto px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
                     value="Submit" />
             </div>
         </div>
@@ -68,6 +69,7 @@ const pageStatus = ref(200);
 const pageLoading = ref(true);
 const showForm = ref("");
 const fileUrl = ref("");
+const fileName = ref("");
 const userStore = useUserStore();
 
 const form: FormObject = reactive(
@@ -139,6 +141,7 @@ const handleLoad = async () => {
             if (result.status === 200) {
                 const data = result.data as MediaResponse;
                 const medium = data.medium as Media;
+                fileName.value = medium.name;
                 fileUrl.value = medium.url;
 
                 if (medium.security_type === "") {