[gnome-weather/wip/ewlsh/gtk4] Improve styling

[Evan Welsh <ewlsh src gnome org>]

commit f951b2ac80b0cd113d7d31a5f0f38d96571fbb8d
Author: Evan Welsh <contact evanwelsh com>
Date:   Sun Jan 2 00:25:51 2022 -0600

    Improve styling

 data/application.css   | 31 ++++++++++++++++++-------------
 data/weather-widget.ui |  6 +++++-
 src/app/city.js        |  3 ++-
 3 files changed, 25 insertions(+), 15 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index f6c7cc1..19d1959 100644
--- a/data/application.css
+++ b/data/application.css
@@ -52,7 +52,7 @@
 }
 
 WeatherThermometerScale {
-    margin: 12px;   
+    margin: 12px;
 }
 
 WeatherThermometerScale > .inner {
@@ -70,6 +70,12 @@ WeatherThermometer > label.low {
     color: #2174d9;
 }
 
+#daily-forecast-box,
+#hourly-forecast-box {
+    /* TODO: Pull from theme/elsewhere */
+    background-color: white;
+}
+
 @define-color temp_chart_fill_color rgba(248, 228, 92, 0.5);
 @define-color temp_chart_stroke_color rgba(246, 211, 45, 1.0);
 
@@ -82,34 +88,33 @@ WeatherThermometer > label.low {
 
 #attribution-label {
     font-size: 9pt;
-    color: rgba(154, 153, 150, 1.0);
+    color: rgba(154, 153, 150, 1);
 }
 
 viewswitchertitle viewswitcher {
-  margin-left: 100px;
-  margin-right: 100px;
+    margin-left: 100px;
+    margin-right: 100px;
 }
 
 button.osd.circular {
-  border-radius: 9999px;
-  min-width: 24px;
-  min-height: 24px;
+    border-radius: 9999px;
+    min-width: 24px;
+    min-height: 24px;
 }
 
 button.osd.circular > image {
-  padding: 12px;
+    padding: 12px;
 }
 
-
 .small-label {
-  font-size: 9pt;
+    font-size: 9pt;
 }
 
 .search-view scrolledwindow {
-  background-color: @theme_selected_bg_color;
-  color: @theme_selected_fg_color;
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
 }
 
 .search-view .large-title {
-  font-weight: bold;
+    font-weight: bold;
 }
diff --git a/data/weather-widget.ui b/data/weather-widget.ui
index 372772f..650b247 100644
--- a/data/weather-widget.ui
+++ b/data/weather-widget.ui
@@ -6,7 +6,7 @@
       <object class="GtkBox" id="outerBox">
         <property name="orientation">vertical</property>
         <property name="margin-start">18</property>
-        <property name="margin-end">18</property>
+        <property name="margin-end">0</property>
         <property name="margin-top">18</property>
         <property name="margin-bottom">18</property>
         <!-- <property name="spacing">18</property> -->
@@ -106,8 +106,10 @@
                     <property name="child">
                       <object class="GtkScrolledWindow">
                         <property name="focusable">1</property>
+                        <property name="has-frame">true</property>
                         <property name="vscrollbar_policy">never</property>
                         <property name="hscrollbar_policy">external</property>
+                        <property name="overflow">hidden</property>
                         <property name="hadjustment">
                           <object class="GtkAdjustment" id="forecastHourlyAdjustment" />
                         </property>
@@ -133,8 +135,10 @@
                     <property name="child">
                       <object class="GtkScrolledWindow">
                         <property name="focusable">1</property>
+                        <property name="has-frame">true</property>
                         <property name="vscrollbar_policy">never</property>
                         <property name="hscrollbar_policy">external</property>
+                        <property name="overflow">hidden</property>
                         <property name="hadjustment">
                           <object class="GtkAdjustment" id="forecastDailyAdjustment" />
                         </property>
diff --git a/src/app/city.js b/src/app/city.js
index 16d62a6..1f09e57 100644
--- a/src/app/city.js
+++ b/src/app/city.js
@@ -60,7 +60,8 @@ var WeatherWidget = GObject.registerClass({
 
         Object.assign(this.layoutManager, {
             maximumSize: 1010,
-            tighteningThreshold: 600,
+            // Ensures ~18px of margin on the right side
+            tighteningThreshold: 992,
         });
 
         this._info = null;