From a70eebd9afa2afeda191ebe9675ffc8def400e7d Mon Sep 17 00:00:00 2001
From: euzu <euzu@proton.me>
Date: Fri, 3 Oct 2025 19:43:07 +0200
Subject: [PATCH] Epg View optimization

---
 bin/build_docker.sh                                          | 4 ++--
 .../scss/app/components/playlist/_playlist_update_view.scss  | 5 ++---
 frontend/src/app/components/playlist/epg_view.rs             | 4 ++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/bin/build_docker.sh b/bin/build_docker.sh
index 84b718ff9..1fe452263 100755
--- a/bin/build_docker.sh
+++ b/bin/build_docker.sh
@@ -175,8 +175,8 @@ for IMAGE_NAME in "${!MULTI_PLATFORM_IMAGES[@]}"; do
     
     # Build and push multi-platform image directly with cache
     BUILDX_CACHE_ARGS=()
-    [ -n "$BUILDX_CACHE_FROM" ] && BUILDX_CACHE_ARGS+=(--cache-from "$BUILDX_CACHE_FROM")
-    [ -n "$BUILDX_CACHE_TO" ] && BUILDX_CACHE_ARGS+=(--cache-to "$BUILDX_CACHE_TO")
+    [ -n "${BUILDX_CACHE_FROM:-}" ] && BUILDX_CACHE_ARGS+=(--cache-from "${BUILDX_CACHE_FROM}")
+    [ -n "${BUILDX_CACHE_TO:-}" ] && BUILDX_CACHE_ARGS+=(--cache-to "${BUILDX_CACHE_TO}")
 
     # If you build on local, you need to activate buildx multiarch builds
     # >  docker buildx create --name multiarch --driver docker-container --use --bootstrap
diff --git a/frontend/scss/app/components/playlist/_playlist_update_view.scss b/frontend/scss/app/components/playlist/_playlist_update_view.scss
index 3f463ba7d..6b8c33aeb 100644
--- a/frontend/scss/app/components/playlist/_playlist_update_view.scss
+++ b/frontend/scss/app/components/playlist/_playlist_update_view.scss
@@ -15,9 +15,8 @@
   }
 
   &__body {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-
+    display: flex;
+    flex-flow: row wrap;
     gap: var(--gap-default);
     box-sizing: border-box;
     overflow-y: auto;
diff --git a/frontend/src/app/components/playlist/epg_view.rs b/frontend/src/app/components/playlist/epg_view.rs
index 7c4a0c034..0d1de37ee 100644
--- a/frontend/src/app/components/playlist/epg_view.rs
+++ b/frontend/src/app/components/playlist/epg_view.rs
@@ -174,7 +174,7 @@ pub fn EpgView() -> Html {
                             <div style={format!("height:{}px", start_index * channel_row_height)}></div>
                             { for tv.channels.iter().enumerate().skip(start_index).take(end_index - start_index).map(|(_i, ch)| {
                                 html! {
-                                    <div class="tp__epg__channel" style={format!("max-height:{channel_row_height}px;min-height={channel_row_height};height:{channel_row_height}px")}>
+                                    <div class="tp__epg__channel" style={format!("max-height:{channel_row_height}px;min-height={channel_row_height}px;height:{channel_row_height}px")}>
                                         <div class="tp__epg__channel-icon">
                                             { if let Some(icon) = &ch.icon {
                                                 html! { <img src={icon.clone()} alt={ch.title.clone()} /> }
@@ -213,7 +213,7 @@ pub fn EpgView() -> Html {
                             <div style={format!("height:{}px", start_index * channel_row_height)}></div>
                             { for tv.channels.iter().enumerate().skip(start_index).take(end_index - start_index).map(|(_i, ch)| {
                                 html! {
-                                  <div class="tp__epg__channel-programs" style={format!("max-height:{channel_row_height}px;min-height={channel_row_height};height:{channel_row_height}px")}>
+                                  <div class="tp__epg__channel-programs" style={format!("max-height:{channel_row_height}px;min-height={channel_row_height}px;height:{channel_row_height}px")}>
                                     { for ch.programmes.iter().map(|p| {
                                         let is_active = now >= p.start && now < p.stop;
                                         let left = get_pos(p.start, start_window);