ui fixes

Author: mythz

BlazorDiffusion/Pages/Albums.razor

@@ -23,7 +23,7 @@
                 <div @key=@album.Id>
                     <NavLink href=@($"/?album={album.AlbumRef}&source={AppSource.Albums}")
                         class=@ClassNames("overflow-hidden flex justify-center")>
-                        <div class="relative sm:p-2 flex flex-col cursor-pointer items-center" style=@($"width:512px;height:512px")>
+                        <div class="relative sm:p-2 flex flex-col cursor-pointer items-center w-32 h-32 sm:w-64 sm:h-64 xl:w-96 xl:h-96 2xl:w-[512px] 2xl:h-[512px]">
                             <ArtifactImage Artifact="artifact" LazyLoad="true"
                                    class=@ClassNames("flex rounded sm:rounded-xl w-full h-full") ImageClass="object-cover" />
 

BlazorDiffusion/Pages/Create.razor

@@ -323,7 +323,7 @@
     var artifact = Creative.Artifacts?.FirstOrDefault(x => x.Id == View);
     if (artifact != null)
     {
-        <SlideOver @ref="SlideOver" Done=@(() => NavigationManager.NavigateTo($"/create?id={Creative.Id}"))
+        <SlideOver @ref="SlideOver" SlideOverClass="relative z-20" Done=@(() => NavigationManager.NavigateTo($"/create?id={Creative.Id}"))
                    ShowTitlebar="false" ShowFooter="false">
 
             <div class=@CssDefaults.SlideOver.TitlebarClass>

BlazorDiffusion/Shared/ArtifactGallery.razor

@@ -139,7 +139,7 @@
 
 @if (Creative != null && Selected != null)
 {
-    <SlideOver Done=@(_ => navTo()) ShowTitlebar="false" ShowFooter="false">
+    <SlideOver SlideOverClass="relative z-20" Done=@(_ => navTo()) ShowTitlebar="false" ShowFooter="false">
     @*Guard against NRE when navigating away whilst SlideOver is open*@
     @if (Creative != null && Selected != null)
     {

BlazorDiffusion/wwwroot/css/app.css

@@ -1365,6 +1365,10 @@ input[data-autocompleted] {
   height: 0.5rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1417,10 +1421,6 @@ input[data-autocompleted] {
   height: 5rem;
 }
 
-.h-32 {
-  height: 8rem;
-}
-
 .max-h-24 {
   max-height: 6rem;
 }
@@ -1445,6 +1445,10 @@ input[data-autocompleted] {
   width: 100%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
 .w-7 {
   width: 1.75rem;
 }
@@ -1533,10 +1537,6 @@ input[data-autocompleted] {
   width: 5rem;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .w-screen {
   width: 100vw;
 }
@@ -4034,6 +4034,10 @@ input[data-autocompleted] {
     display: none;
   }
 
+  .sm\:h-96 {
+    height: 24rem;
+  }
+
   .sm\:h-24 {
     height: 6rem;
   }
@@ -4046,10 +4050,18 @@ input[data-autocompleted] {
     height: 100vh;
   }
 
+  .sm\:h-64 {
+    height: 16rem;
+  }
+
   .sm\:w-1\/3 {
     width: 33.333333%;
   }
 
+  .sm\:w-96 {
+    width: 24rem;
+  }
+
   .sm\:w-\[600px\] {
     width: 600px;
   }
@@ -4066,14 +4078,14 @@ input[data-autocompleted] {
     width: 1.5rem;
   }
 
-  .sm\:w-96 {
-    width: 24rem;
-  }
-
   .sm\:w-full {
     width: 100%;
   }
 
+  .sm\:w-64 {
+    width: 16rem;
+  }
+
   .sm\:max-w-xs {
     max-width: 20rem;
   }
@@ -4474,6 +4486,22 @@ input[data-autocompleted] {
     display: table-cell;
   }
 
+  .xl\:h-\[512px\] {
+    height: 512px;
+  }
+
+  .xl\:h-96 {
+    height: 24rem;
+  }
+
+  .xl\:w-\[512px\] {
+    width: 512px;
+  }
+
+  .xl\:w-96 {
+    width: 24rem;
+  }
+
   .xl\:max-w-3xl {
     max-width: 48rem;
   }
@@ -4497,6 +4525,14 @@ input[data-autocompleted] {
     display: table-cell;
   }
 
+  .\32xl\:h-\[512px\] {
+    height: 512px;
+  }
+
+  .\32xl\:w-\[512px\] {
+    width: 512px;
+  }
+
   .\32xl\:max-w-screen-xl {
     max-width: 1280px;
   }