Use the display aspect ratio instead of 16:9 in layout previews

src/components/layout/LayoutUtils.ts

@@ -0,0 +1,31 @@
+import { St } from '@gi.ext';
+import { getScalingFactorOf } from '@utils/ui';
+export default class LayoutUtils {
+    static calc_size(
+        widget: St.Widget,
+        monitorIndex: number,
+        smallEdgeSize: number,
+    ): [number, number] {
+        const monitorGeometry =
+            global.display.get_monitor_geometry(monitorIndex);
+
+        const aspectRatio = monitorGeometry.width / monitorGeometry.height;
+        const [, scalingFactor] = getScalingFactorOf(widget);
+
+        if (aspectRatio === 1) {
+            return [
+                smallEdgeSize * scalingFactor,
+                smallEdgeSize * scalingFactor,
+            ];
+        }
+
+        return [
+            (aspectRatio > 1.0
+                ? Math.round(smallEdgeSize * aspectRatio)
+                : smallEdgeSize) * scalingFactor,
+            (aspectRatio < 1.0
+                ? Math.round(smallEdgeSize / aspectRatio)
+                : smallEdgeSize) * scalingFactor,
+        ];
+    }
+}

src/components/snapassist/snapAssist.ts

@@ -3,6 +3,7 @@ import { GObject, St, Clutter, Mtk, Meta, Gio } from '@gi.ext';
 import SnapAssistTile from './snapAssistTile';
 import SnapAssistLayout from './snapAssistLayout';
 import Layout from '../layout/Layout';
+import LayoutUtils from '../layout/LayoutUtils';
 import Tile from '../layout/Tile';
 import Settings from '@settings/settings';
 import GlobalState from '@utils/globalState';
@@ -19,9 +20,9 @@ import { buildBlurEffect } from '@utils/gnomesupport';
 export const SNAP_ASSIST_SIGNAL = 'snap-assist';
 
 const GAPS = 4;
-// 16:9 ratio and then rounded to int
-const SNAP_ASSIST_LAYOUT_WIDTH = 120;
-const SNAP_ASSIST_LAYOUT_HEIGHT = 68;
+// The size of the smallest size of the monitor
+// Will result into a size of 120x68 if the monitor is 16:9
+const SNAP_ASSIST_LAYOUT_SIZE = 68;
 
 const debug = logger('SnapAssist');
 
@@ -209,7 +210,7 @@ class SnapAssistContent extends St.BoxLayout {
             ? Math.max(
                   0,
                   this._snapAssistantThreshold -
-                      this.height / 2 +
+                      46 * getMonitorScalingFactor(this._monitorIndex) +
                       this._padding,
               )
             : -this.height + this._padding;
@@ -237,12 +238,13 @@ class SnapAssistContent extends St.BoxLayout {
         this._snapAssistLayouts.forEach((lay) => lay.destroy());
         this.remove_all_children();
 
-        const [, scalingFactor] = getScalingFactorOf(this);
-
         const layoutGaps = buildMarginOf(GAPS);
+        const [width, height] = LayoutUtils.calc_size(
+            this,
+            this._monitorIndex,
+            SNAP_ASSIST_LAYOUT_SIZE,
+        );
 
-        const width = SNAP_ASSIST_LAYOUT_WIDTH * scalingFactor;
-        const height = SNAP_ASSIST_LAYOUT_HEIGHT * scalingFactor;
         // build the layouts inside the snap assistant. Place a spacer between each layout
         this._snapAssistLayouts = layouts.map((lay, ind) => {
             const saLay = new SnapAssistLayout(

src/indicator/defaultMenu.ts

@@ -20,6 +20,7 @@ import { Monitor } from 'resource:///org/gnome/shell/ui/layout.js';
 import Layout from '@components/layout/Layout';
 import { _ } from '../translations';
 import { openPrefs } from '@polyfill';
+import LayoutUtils from '@components/layout/LayoutUtils';
 import { widgetOrientation } from '@utils/gnomesupport';
 
 const debug = logger('DefaultMenu');
@@ -76,8 +77,11 @@ class LayoutsRow extends St.BoxLayout {
         const selectedIndex = layouts.findIndex((lay) => lay.id === selectedId);
         const hasGaps = Settings.get_inner_gaps(1).top > 0;
 
-        const layoutHeight: number = 36;
-        const layoutWidth: number = 64; // 16:9 ratio. -> (16*layoutHeight) / 9 and then rounded to int
+        const [layoutWidth, layoutHeight] = LayoutUtils.calc_size(
+            this,
+            this._monitor.index,
+            36,
+        );
 
         this._layoutsButtons = layouts.map((lay, ind) => {
             const btn = new LayoutButton(