From 15e0440a8bc10e4a953ac011b65d8984956b5943 Mon Sep 17 00:00:00 2001
From: Sam Hewitt <snwh@gnome.org>
Date: Tue, 5 Dec 2023 16:31:47 -0330
Subject: [PATCH] appDisplay: CSS cleanup & fixes for app dialog

- change the container and dialog actor alignments
- pad the container to not have dialog overlap panel
- clean up extraneous app-folder css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3044>
---
 .../gnome-shell-sass/widgets/_app-grid.scss   | 46 ++++++++-----------
 js/ui/appDisplay.js                           |  8 ++--
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 7286c089a..e7efac75f 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -1,13 +1,14 @@
 /* App Grid */
 
 $app_icon_size: 96px;
+$app_folder_size: 720px;
 
 // app icons
 .icon-grid {
   row-spacing: $base_padding * 2;
   column-spacing: $base_padding * 2;
-  max-row-spacing: $base_padding * 7;
-  max-column-spacing: $base_padding * 7;
+  max-row-spacing: $base_padding * 6;
+  max-column-spacing: $base_padding * 6;
   page-padding-top: $base_padding * 4;
   page-padding-bottom: $base_padding * 4;
   page-padding-left: $base_padding * 3;
@@ -52,22 +53,29 @@ $app_icon_size: 96px;
   }
 }
 
-// expanded folder
+.app-folder-dialog-container {
+  // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
+  padding-top: $panel_height;
+}
+
+// Expanded app folder dialog
 .app-folder-dialog {
+  width: $app_folder_size;
+  height: $app_folder_size;
+
   border-radius: $modal_radius * 4;
   background-color: $system_overlay_bg_color;
+  box-shadow: inset 0 0 0 1px $system_borders_color;
+  padding: 0 1px;
 
   @if $is_highcontrast {
-    padding: $base_padding*2 2px $base_padding*2 2px;
+    padding: 0 2px;
     box-shadow: inset 0 0 0 2px $hc_inset_color;
-  } @else {
-    padding: $base_padding*2 1px $base_padding*2 1px;
-    box-shadow: inset 0 0 0 1px $system_borders_color;
   }
 
   & .folder-name-container {
-    padding: $base_padding * 4 $base_padding * 6 0;
-    spacing: $base_padding * 2;
+    padding: $base_padding * 4 $base_padding * 6;
+    padding-bottom: 0;
 
     & .folder-name-label,
     & .folder-name-entry {
@@ -76,32 +84,14 @@ $app_icon_size: 96px;
 
     & .folder-name-entry {
       width: 12em;
-      color: $system_fg_color !important;
     }
-
-    /* FIXME: this is to keep the label in sync with the entry */
-    & .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
-  }
-
-  & .icon-grid {
-    row-spacing: $base_padding * 2;
-    column-spacing: $base_padding * 5;
-    page-padding-top: 0;
-    page-padding-bottom: 0;
-    page-padding-left: 0;
-    page-padding-right: 0;
   }
 
   & .page-indicators {
-    margin-bottom: 18px;
+    margin-bottom: $base_padding * 4;
   }
 }
 
-.app-folder-dialog-container {
-  padding: $base_padding * 2;
-  width: 720px;
-  height: 720px;
-}
 
 
 // Rename popup for app folders
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 506bf1827..14b2ab258 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2531,16 +2531,16 @@ export const AppFolderDialog = GObject.registerClass({
             style_class: 'app-folder-dialog',
             x_expand: true,
             y_expand: true,
-            x_align: Clutter.ActorAlign.FILL,
-            y_align: Clutter.ActorAlign.FILL,
+            x_align: Clutter.ActorAlign.CENTER,
+            y_align: Clutter.ActorAlign.CENTER,
             vertical: true,
         });
 
         this.child = new St.Bin({
             style_class: 'app-folder-dialog-container',
             child: this._viewBox,
-            x_align: Clutter.ActorAlign.CENTER,
-            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.FILL,
+            y_align: Clutter.ActorAlign.FILL,
         });
 
         this._addFolderNameEntry();