From 7173248532836605f2523a5c3871cb988b2ead45 Mon Sep 17 00:00:00 2001
From: EugeneTes <meelstorm@gmail.com>
Date: Thu, 19 Mar 2026 09:26:05 +0100
Subject: [PATCH] better image preview window

---
 .../Dialogs/ImagePreviewDialog.razor          | 51 ++++++++++--------
 .../Services/BlazorImagePreviewService.cs     |  6 ++-
 .../wwwroot/css/visionbuilder.css             | 52 ++++++++++++++-----
 3 files changed, 71 insertions(+), 38 deletions(-)

diff --git a/VisionBuilder.UI.Blazor/Dialogs/ImagePreviewDialog.razor b/VisionBuilder.UI.Blazor/Dialogs/ImagePreviewDialog.razor
index afb38ae..6873370 100644
--- a/VisionBuilder.UI.Blazor/Dialogs/ImagePreviewDialog.razor
+++ b/VisionBuilder.UI.Blazor/Dialogs/ImagePreviewDialog.razor
@@ -1,40 +1,47 @@
 @using MudBlazor
 @implements IDisposable
 
-<MudDialog>
+<MudDialog Class="image-preview-dlg" DefaultFocus="DefaultFocus.None">
     <DialogContent>
         @if (ViewModel != null)
         {
-            <div class="image-preview-dialog">
+            <div class="imgpreview-label">@ViewModel.ImageName</div>
+            <div class="imgpreview-toolbar">
+                <div class="imgpreview-toolbar-left">
+                    @if (ViewModel.IsPreviousImageEnabled)
+                    {
+                        <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
+                                   OnClick="OnPrevious">Previous image</MudButton>
+                    }
+                    <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
+                               OnClick="OnSwitchView">@(ViewModel.OriginalView ? "Show Analysis" : "Show Original")</MudButton>
+                </div>
+                <div class="imgpreview-toolbar-right">
+                    @if (ViewModel.LearnButtonVisible)
+                    {
+                        <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
+                                   OnClick="OnLearn">Learn this</MudButton>
+                    }
+                    @if (ViewModel.IsNextImageEnabled)
+                    {
+                        <MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
+                                   OnClick="OnNext">Next image</MudButton>
+                    }
+                    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="imgpreview-btn"
+                               OnClick="Close">Close</MudButton>
+                </div>
+            </div>
+            <div class="imgpreview-image-area">
                 @{
                     var imageUri = ViewModel.ImageAnalysis?.ToBase64DataUri();
                 }
                 @if (!string.IsNullOrEmpty(imageUri))
                 {
-                    <img src="@imageUri" alt="@ViewModel.ImageName" class="image-preview-img" />
+                    <img src="@imageUri" alt="@ViewModel.ImageName" class="imgpreview-image" />
                 }
-                <div class="image-preview-info">
-                    <MudText Typo="Typo.subtitle1">@ViewModel.ImageName</MudText>
-                </div>
-                <div class="image-preview-actions">
-                    <MudButton Variant="Variant.Outlined" Disabled="@(!ViewModel.IsPreviousImageEnabled)"
-                               OnClick="OnPrevious">Previous</MudButton>
-                    <MudButton Variant="Variant.Outlined"
-                               OnClick="OnSwitchView">@(ViewModel.OriginalView ? "Analysis" : "Original")</MudButton>
-                    <MudButton Variant="Variant.Outlined" Disabled="@(!ViewModel.IsNextImageEnabled)"
-                               OnClick="OnNext">Next</MudButton>
-                    @if (ViewModel.LearnButtonVisible)
-                    {
-                        <MudButton Variant="Variant.Filled" Color="Color.Primary"
-                                   OnClick="OnLearn">Learn</MudButton>
-                    }
-                </div>
             </div>
         }
     </DialogContent>
-    <DialogActions>
-        <MudButton OnClick="Close">Close</MudButton>
-    </DialogActions>
 </MudDialog>
 
 @code {
diff --git a/VisionBuilder.UI.Blazor/Services/BlazorImagePreviewService.cs b/VisionBuilder.UI.Blazor/Services/BlazorImagePreviewService.cs
index 75dc26f..8fcbbbd 100644
--- a/VisionBuilder.UI.Blazor/Services/BlazorImagePreviewService.cs
+++ b/VisionBuilder.UI.Blazor/Services/BlazorImagePreviewService.cs
@@ -25,8 +25,10 @@ public class BlazorImagePreviewService : IImagePreviewService
         };
         var options = new DialogOptions
         {
-            MaxWidth = MaxWidth.Large,
-            FullWidth = true
+            MaxWidth = MaxWidth.False,
+            FullWidth = true,
+            FullScreen = true,
+            NoHeader = true
         };
         var dialog = await _dialogService.ShowAsync<ImagePreviewDialog>("Image Preview", parameters, options);
         await dialog.Result;
diff --git a/VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css b/VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css
index 7bfae6c..f656fe6 100644
--- a/VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css
+++ b/VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css
@@ -244,28 +244,52 @@
 }
 
 /* Image Preview Dialog */
-.image-preview-dialog {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
+.image-preview-dlg .mud-dialog-content {
+    padding: 0 !important;
 }
 
-.image-preview-img {
-    max-width: 100%;
-    max-height: 60vh;
-    object-fit: contain;
-}
-
-.image-preview-info {
+.imgpreview-label {
     text-align: center;
+    font-size: 1rem;
+    padding: 4px 16px;
+    background: #fff;
 }
 
-.image-preview-actions {
+.imgpreview-toolbar {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 16px;
+    gap: 8px;
+}
+
+.imgpreview-toolbar-left,
+.imgpreview-toolbar-right {
     display: flex;
     gap: 8px;
-    flex-wrap: wrap;
+}
+
+.imgpreview-btn {
+    min-width: 140px !important;
+    height: 52px !important;
+    font-weight: 600 !important;
+    font-size: 0.8rem !important;
+    font-family: 'Verdana', sans-serif !important;
+}
+
+.imgpreview-image-area {
+    flex: 1;
+    display: flex;
+    align-items: center;
     justify-content: center;
+    background: #fff;
+    min-height: 0;
+    padding: 8px 16px 16px;
+}
+
+.imgpreview-image {
+    max-width: 100%;
+    max-height: calc(100vh - 200px);
+    object-fit: contain;
 }
 
 /* Settings Dialog */