Enhance layout styles: update alignment classes for improved responsiveness and add utility classes for alignment

FoodsharingSiegen.Server/Dialogs/ViewImagesDialog.razor

@@ -7,7 +7,11 @@
         <Button Color="Color.Secondary" Class="position-absolute start-0 top-0 m-2 z-3 text-white bg-dark border-0 rounded-circle w-40px h-40px fs-4 lh-1" Clicked="() => SelectedImageIndex = null">
             <i class="fa-solid fa-close"></i>
         </Button>
+
+        <a href="@(_images[SelectedImageIndex.Value])" target="_blank" download>
             <img src="@(_images[SelectedImageIndex.Value])" class="img-fluid rounded" style="max-height: 80vh;" />
+        </a>
+        
         <div class="d-flex justify-content-between position-absolute top-50 start-0 w-100">
             <Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == 0)" Clicked="() => SelectedImageIndex--"><i class="fa-solid fa-chevron-left"></i></Button>
             <Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == _images.Count - 1)" Clicked="() => SelectedImageIndex++"><i class="fa-solid fa-chevron-right"></i></Button>

FoodsharingSiegen.Server/Pages/ForgotPassword.razor

@@ -6,7 +6,7 @@
 
 <PageTitle>@AppSettings.Terms.Title - Passwort vergessen</PageTitle>
 
-<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
     <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
         
         <div class="card-body p-4 p-md-5">

FoodsharingSiegen.Server/Pages/Login.razor

@@ -6,7 +6,7 @@
 
 <PageTitle>@AppSettings.Terms.Title - Login</PageTitle>
 
-<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
     <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
         
         <div class="card-body p-4 p-md-5">

FoodsharingSiegen.Server/Pages/ResetPassword.razor

@@ -6,7 +6,7 @@
 
 <PageTitle>@AppSettings.Terms.Title - Neues Passwort setzen</PageTitle>
 
-<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
+<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
     <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
         
         <div class="card-body p-4 p-md-5">

FoodsharingSiegen.Server/Pages/UploadVerification.razor

@@ -5,7 +5,7 @@
 
 <PageTitle>Identitätsprüfung - @AppSettings.Value.Terms.Title</PageTitle>
 
-<div class="row min-vh-100 align-items-center justify-content-center p-0 p-md-5 m-0">
+<div class="row min-vh-100 align-items-center-sm justify-content-center p-0 p-md-5 m-0">
     <div class="col-12 col-md-10 col-lg-8 col-xl-5 login-form p-2">
         <div class="card shadow-sm border-0">
             <div class="card-body p-3 p-md-5">
@@ -38,6 +38,22 @@
                         <strong>Hinweis:</strong> Dies ist die Upload-Seite für Foodsaver <b>@_prospect.FsId</b>.
                     </div>
 
+                    <div class="mb-3 text-center">
+                        
+                        @if (_uploadedCount >= 5)
+                        {
+                            <div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
+                        }
+                        else
+                        {
+                            <InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
+                            <label for="fileInput" class="btn btn-outline-success w-100" style="height: 5rem;">
+                                <i class="fa-solid fa-images me-2"></i>Bild auswählen
+                            </label>
+                            <span class="badge bg-secondary mt-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
+                        }
+                    </div>
+
                     <div class="mb-1 text-muted">
                         Um dich auf der Foodsharing-Plattform als Foodsaver freischalten zu können, muss ein*e Botschafter*in Name, Adresse und Geburtsdatum im Profil des Foodsavers auf Korrektheit durch Vergleich mit einem Ausweisdokument prüfen. Das ist wichtig, damit die <a href="https://wiki.foodsharing.network/wiki/Rechtsvereinbarung" target="_blank">Rechtsvereinbarung</a> Bestand hat und wir die Zusagen erfüllen, die wir den Spenderbetrieben geben.<br>
                     </div>
@@ -58,22 +74,6 @@
                         </ul>
                     </div>
 
-                    <div class="mb-4 text-center">
-                        
-                        @if (_uploadedCount >= 5)
-                        {
-                            <div class="alert alert-warning py-2 mb-0">Du hast die maximale Anzahl von 5 Bildern erreicht.</div>
-                        }
-                        else
-                        {
-                            <span class="badge bg-secondary mb-2 text-wrap">Es können noch bis zu @(5 - _uploadedCount) Bilder hochgeladen werden</span>
-                            <InputFile id="fileInput" OnChange="OnInputFileChange" class="d-none" accept="image/*" />
-                            <label for="fileInput" class="btn btn-outline-success w-100">
-                                <i class="fa-solid fa-images me-2"></i>Bild auswählen
-                            </label>
-                        }
-                    </div>
-
                     @if (_isUploading)
                     {
                         <div class="text-center my-3">

FoodsharingSiegen.Server/wwwroot/css/_utilities.scss

@@ -58,6 +58,14 @@ $spacers: (
       margin-top: $size-val !important;
       margin-bottom: $size-val !important;
     }
+
+    .align-items-center#{$breakpoint} {
+      align-items: center !important;
+    }
+
+    .align-items-start#{$breakpoint} {
+      align-items: flex-start !important;
+    }
   }
 }