From c43e888ebd2a6ca9fb7d240607b838e3125d7853 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Tue, 14 Jul 2026 18:23:23 +0200
Subject: [PATCH] fix(ui): Fix cluster long description wrap missing gap +
 gallery images looking better

---
 .../oneclient_app/src/layout/cluster_shell.rs |  3 +-
 .../src/view/app/browser/package/panels.rs    | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/oneclient_app/src/layout/cluster_shell.rs b/packages/oneclient_app/src/layout/cluster_shell.rs
index 5f7e3f1a..49b13df2 100644
--- a/packages/oneclient_app/src/layout/cluster_shell.rs
+++ b/packages/oneclient_app/src/layout/cluster_shell.rs
@@ -249,14 +249,13 @@ fn cluster_header(
         .horizontal()
         .content(Content::Flex)
         .width(Size::fill())
-        .height(Size::px(HEADER_HEIGHT))
+        .min_height(Size::px(HEADER_HEIGHT))
         .cross_align(Alignment::Center)
         .spacing(12.)
         .child(
             rect()
                 .vertical()
                 .width(Size::flex(1.0))
-                .height(Size::fill())
                 .main_align(Alignment::Center)
                 .spacing(6.)
                 .child(
diff --git a/packages/oneclient_app/src/view/app/browser/package/panels.rs b/packages/oneclient_app/src/view/app/browser/package/panels.rs
index c858f419..c0e854d7 100644
--- a/packages/oneclient_app/src/view/app/browser/package/panels.rs
+++ b/packages/oneclient_app/src/view/app/browser/package/panels.rs
@@ -1,5 +1,6 @@
 use super::*;
 
+use freya::query::QueryStateData;
 use oneclient_core::packages::types::{
     GalleryImage, PackageBody, ProjectDetail, ReleaseType, VersionSummary,
 };
@@ -7,11 +8,14 @@ use oneclient_core::packages::ProviderId;
 
 use crate::BridgeDispatch;
 use crate::components::{Button, Icon, IconType, Segment, SegmentedControl};
-use crate::hooks::VERSIONS_PAGE_SIZE;
+use crate::hooks::{use_cached_image, VERSIONS_PAGE_SIZE};
 use crate::theme::colors;
 use crate::ui::border_all_color;
 use crate::utils::format_size;
 
+const GALLERY_IMAGE_H: f32 = 360.;
+const GALLERY_EDGE: u32 = 1024;
+
 
 pub(super) fn loading_body() -> impl IntoElement {
     rect()
@@ -112,6 +116,31 @@ impl KeyExt for GalleryTile {
 
 impl Component for GalleryTile {
     fn render(&self) -> impl IntoElement {
+        let query = use_cached_image(Some(self.image.url.clone()), GALLERY_EDGE);
+        let reader = query.read();
+        let loaded = match &*reader.state() {
+            QueryStateData::Settled { res: Ok(bytes), .. }
+            | QueryStateData::Loading {
+                res: Some(Ok(bytes)),
+            } => Some((self.image.url.clone(), bytes.clone())),
+            _ => None,
+        };
+
+        let preview = rect()
+            .width(Size::fill())
+            .height(Size::px(GALLERY_IMAGE_H))
+            .center()
+            .overflow(Overflow::Clip)
+            .background(colors::component_bg())
+            .maybe_child(loaded.map(|(url, bytes)| {
+                ImageViewer::new((url, bytes))
+                    .width(Size::fill())
+                    .height(Size::fill())
+                    .aspect_ratio(AspectRatio::Max)
+                    .image_cover(ImageCover::Center)
+                    .into_element()
+            }));
+
         rect()
             .vertical()
             .width(Size::fill())
@@ -119,7 +148,7 @@ impl Component for GalleryTile {
             .overflow(Overflow::Clip)
             .background(PANEL_BG)
             .border(border_all_color(1., colors::component_border()))
-            .child(PackageBanner::new(Some(self.image.url.clone()), 240.))
+            .child(preview)
             .maybe(self.image.title.is_some(), |el| {
                 el.child(
                     rect()