[gnome-calculator] math-window: Clamp the window's content

[Robert Roth <robertroth src gnome org>]

commit 5a0ab0727aa5c72270c3dcfbae8a2d15f9cda0a1
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Tue Mar 16 13:29:51 2021 +0100

    math-window: Clamp the window's content
    
    This limits the width reachable by the window's content, preventing it
    from becoming stupidly wide.
    
    This also adds margins to the display when the window is wide to make it
    look better.

 src/ui/calculator.css | 33 +++++++++++++++++++++++++--------
 src/ui/math-window.ui | 38 +++++++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 23 deletions(-)
---
diff --git a/src/ui/calculator.css b/src/ui/calculator.css
index 30493877..73a25ced 100644
--- a/src/ui/calculator.css
+++ b/src/ui/calculator.css
@@ -17,28 +17,45 @@
 
 mathdisplay {
   border: solid @borders 1px;
-  border-left-width: 0;
-  border-right-width: 0;
+  margin: 6px 12px 0 12px;
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-/* It isn't first in keyboard mode */
-mathdisplay:first-child {
+mathdisplay:last-child {
+  margin-bottom: 12px;
+}
+
+clamp.small mathdisplay {
+  border-width: 1px 0;
+  margin: 6px 0 0 0;
+}
+
+clamp.small mathdisplay:first-child {
   border-top-width: 0;
+  margin: 0;
 }
 
-/* It is last in keyboard mode */
-mathdisplay:last-child {
+clamp.small mathdisplay:last-child {
   border-bottom-width: 0;
 }
 
-window > deck > box > grid > box {
+clamp > grid > :first-child {
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  margin-top: 12px;
+}
+
+clamp.small > grid > :first-child {
+  margin-top: 0;
+}
+
+window > deck > box > clamp > grid > box {
   padding-left: 12px;
   padding-right: 12px;
   padding-bottom: 12px;
 }
 
 /* This affects the keyboard mode */
-window > deck > box > grid > mathconverter {
+window > deck > box > clamp > grid > mathconverter {
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 12px;
diff --git a/src/ui/math-window.ui b/src/ui/math-window.ui
index f9e0f00e..9bf57253 100644
--- a/src/ui/math-window.ui
+++ b/src/ui/math-window.ui
@@ -197,24 +197,32 @@
           </object>
         </child>
         <child>
-          <object class="GtkGrid" id="grid">
+          <object class="HdyClamp">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="vexpand">True</property>
-            <property name="border_width">0</property>
-            <property name="orientation">vertical</property>
-            <property name="row_spacing">6</property>
-            <child>
-              <placeholder/>
-            </child>
+            <!-- (5*60 button width + 4*4 spacing + 2*12 margins) * 2 panels = 680 width. -->
+            <property name="maximum-size">680</property>
+            <property name="tightening-threshold">680</property>
             <child>
-              <object class="MathConverter" id="converter">
-                <property name="visible">False</property>
+              <object class="GtkGrid" id="grid">
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="vexpand">True</property>
+                <property name="border_width">0</property>
+                <property name="orientation">vertical</property>
+                <property name="row_spacing">6</property>
+                <child>
+                  <placeholder/>
+                </child>
+                <child>
+                  <object class="MathConverter" id="converter">
+                    <property name="visible">False</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">0</property>
+                  </packing>
+                </child>
               </object>
-              <packing>
-                <property name="left_attach">0</property>
-                <property name="top_attach">0</property>
-              </packing>
             </child>
           </object>
         </child>