From 7e40c1dc0bb878a1c4d7ded75867e01b15ae236b Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Wed, 27 Aug 2025 03:15:47 -0500
Subject: [PATCH] Styles: add shared Typography/Scroll resources; add platform
 overrides (Desktop/Android/Browser) and load via App; switch icons to
 resource-based sizes and cap history text lines.

---
 .../Styles/Android.axaml                      | 17 +++++++++
 .../Styles/Browser.axaml                      | 16 +++++++++
 .../Styles/Desktop.axaml                      | 16 +++++++++
 src/AdvancedCalculator/App.axaml              |  2 ++
 src/AdvancedCalculator/App.axaml.cs           | 36 +++++++++++++++++++
 src/AdvancedCalculator/Styles/Scroll.axaml    | 21 +++++++++++
 .../Styles/Typography.axaml                   | 30 ++++++++++++++++
 src/AdvancedCalculator/Views/MainView.axaml   | 12 +++----
 8 files changed, 144 insertions(+), 6 deletions(-)
 create mode 100644 src/AdvancedCalculator.Android/Styles/Android.axaml
 create mode 100644 src/AdvancedCalculator.Browser/Styles/Browser.axaml
 create mode 100644 src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
 create mode 100644 src/AdvancedCalculator/Styles/Scroll.axaml
 create mode 100644 src/AdvancedCalculator/Styles/Typography.axaml

diff --git a/src/AdvancedCalculator.Android/Styles/Android.axaml b/src/AdvancedCalculator.Android/Styles/Android.axaml
new file mode 100644
index 0000000..30f7e04
--- /dev/null
+++ b/src/AdvancedCalculator.Android/Styles/Android.axaml
@@ -0,0 +1,17 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Android overrides: larger, touch-first -->
+  <x:Double x:Key="FontSizeBase">16</x:Double>
+  <x:Double x:Key="FontSizeLarge">18</x:Double>
+  <x:Double x:Key="IconSizeM">24</x:Double>
+  <x:Double x:Key="LineHeightBase">1.35</x:Double>
+
+  <!-- Thin overlay-like scrollbars -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="8"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="8"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator.Browser/Styles/Browser.axaml b/src/AdvancedCalculator.Browser/Styles/Browser.axaml
new file mode 100644
index 0000000..3842c71
--- /dev/null
+++ b/src/AdvancedCalculator.Browser/Styles/Browser.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Browser overrides: middle ground -->
+  <x:Double x:Key="FontSizeBase">15</x:Double>
+  <x:Double x:Key="IconSizeM">22</x:Double>
+  <x:Double x:Key="LineHeightBase">1.3</x:Double>
+
+  <!-- Slightly thinner scrollbars on web -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="8"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="8"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml b/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
new file mode 100644
index 0000000..7a951d8
--- /dev/null
+++ b/src/AdvancedCalculator.Desktop/Styles/Desktop.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Desktop overrides: slightly denser -->
+  <x:Double x:Key="FontSizeBase">13</x:Double>
+  <x:Double x:Key="LineHeightBase">1.2</x:Double>
+  <x:Double x:Key="IconSizeM">20</x:Double>
+
+  <!-- Scrollbars a bit thicker on desktop -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="12"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="12"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/App.axaml b/src/AdvancedCalculator/App.axaml
index 5e686cd..8d7bed3 100644
--- a/src/AdvancedCalculator/App.axaml
+++ b/src/AdvancedCalculator/App.axaml
@@ -6,6 +6,8 @@
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="avares://AdvancedCalculator/Styles/Typography.axaml"/>
+        <StyleInclude Source="avares://AdvancedCalculator/Styles/Scroll.axaml"/>
     </Application.Styles>
 
     <Application.Resources>
diff --git a/src/AdvancedCalculator/App.axaml.cs b/src/AdvancedCalculator/App.axaml.cs
index e967b3b..32716eb 100644
--- a/src/AdvancedCalculator/App.axaml.cs
+++ b/src/AdvancedCalculator/App.axaml.cs
@@ -5,6 +5,8 @@ using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Data.Core.Plugins;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
+using System;
 
 namespace AdvancedCalculator;
 
@@ -21,6 +23,40 @@ public partial class App : Application
         // Without this line you will get duplicate validations from both Avalonia and CT
         BindingPlugins.DataValidators.RemoveAt(0);
 
+        // Load platform-specific styles (typography, scrollbars overrides)
+        try
+        {
+            var styles = Current?.Styles;
+            if (styles is not null)
+            {
+                if (OperatingSystem.IsAndroid())
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Android/Styles/Android.axaml")
+                    });
+                }
+                else if (OperatingSystem.IsBrowser())
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Browser/Styles/Browser.axaml")
+                    });
+                }
+                else
+                {
+                    styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
+                    {
+                        Source = new Uri("avares://AdvancedCalculator.Desktop/Styles/Desktop.axaml")
+                    });
+                }
+            }
+        }
+        catch
+        {
+            // If a platform-specific style dictionary is missing, continue without failing.
+        }
+
         if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
         {
             desktop.MainWindow = new MainWindow
diff --git a/src/AdvancedCalculator/Styles/Scroll.axaml b/src/AdvancedCalculator/Styles/Scroll.axaml
new file mode 100644
index 0000000..ea9284d
--- /dev/null
+++ b/src/AdvancedCalculator/Styles/Scroll.axaml
@@ -0,0 +1,21 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Shared scrolling defaults -->
+  <Style Selector="ListBox">
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
+  </Style>
+
+  <Style Selector="ScrollViewer">
+    <Setter Property="CanScrollHorizontally" Value="False"/>
+  </Style>
+
+  <!-- Thin-ish scrollbars by default; platform overrides will adjust -->
+  <Style Selector="ScrollBar:vertical">
+    <Setter Property="Width" Value="10"/>
+  </Style>
+  <Style Selector="ScrollBar:horizontal">
+    <Setter Property="Height" Value="10"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/Styles/Typography.axaml b/src/AdvancedCalculator/Styles/Typography.axaml
new file mode 100644
index 0000000..eb80272
--- /dev/null
+++ b/src/AdvancedCalculator/Styles/Typography.axaml
@@ -0,0 +1,30 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <!-- Shared typography resources -->
+  <x:Double x:Key="FontSizeSmall">12</x:Double>
+  <x:Double x:Key="FontSizeBase">14</x:Double>
+  <x:Double x:Key="FontSizeLarge">16</x:Double>
+  <x:Double x:Key="FontSizeXL">20</x:Double>
+
+  <x:Double x:Key="IconSizeS">18</x:Double>
+  <x:Double x:Key="IconSizeM">22</x:Double>
+  <x:Double x:Key="IconSizeL">26</x:Double>
+
+  <x:Double x:Key="LineHeightTight">1.1</x:Double>
+  <x:Double x:Key="LineHeightBase">1.25</x:Double>
+  <x:Double x:Key="LineHeightRelaxed">1.4</x:Double>
+
+  <!-- Defaults for text -->
+  <Style Selector="TextBlock">
+    <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeBase}"/>
+    <Setter Property="TextWrapping" Value="Wrap"/>
+    <Setter Property="LineHeight" Value="{DynamicResource LineHeightBase}"/>
+  </Style>
+
+  <!-- Subtle caption text helper -->
+  <Style Selector="TextBlock.caption">
+    <Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeSmall}"/>
+    <Setter Property="Opacity" Value="0.85"/>
+  </Style>
+</ResourceDictionary>
+
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index ba2be2e..d5fc5e7 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -59,8 +59,8 @@
                         Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
                         AutomationProperties.Name="Insert variable">
                   <Grid ColumnDefinitions="Auto,*,Auto">
-                    <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                               FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                           FontSize="{DynamicResource IconSizeM}" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
                     <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
                     <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
                       <TextBlock Text="{Binding Value}" />
@@ -132,11 +132,11 @@
             <ListBox.ItemTemplate>
               <DataTemplate x:DataType="m:HistoryItem">
                 <Grid ColumnDefinitions="Auto,*" Margin="4,2">
-                  <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
-                             FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
+                           FontSize="{DynamicResource IconSizeM}" VerticalAlignment="Center" Margin="0,0,8,0" />
                   <StackPanel Grid.Column="1">
-                    <TextBlock Text="{Binding Input}" />
-                    <TextBlock Text="{Binding Output}" FontWeight="Bold" />
+                    <TextBlock Text="{Binding Input}" MaxLines="3" />
+                    <TextBlock Text="{Binding Output}" FontWeight="Bold" MaxLines="2" />
                   </StackPanel>
                 </Grid>
               </DataTemplate>