From ac8c0324e2f0cbfb26f3cfee61921f86b78c6601 Mon Sep 17 00:00:00 2001
From: Den <hi@den.dev>
Date: Thu, 23 Mar 2023 14:21:05 -0700
Subject: [PATCH] Update control to make interaction responsive (#24977)

---
 .../Settings.UI/Strings/en-us/Resources.resw  | 12 ++++++---
 .../Settings.UI/Views/AwakePage.xaml          | 27 ++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
index 3473d8344e..e882489790 100644
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -1834,8 +1834,8 @@ From there, simply click on one of the supported files in the File Explorer and
   <data name="Awake_DisplaySettingsCard.Description" xml:space="preserve">
     <value>This setting is only available when keeping the PC awake</value>
   </data>
-  <data name="Awake_ExpirationSettingsCard.Description" xml:space="preserve">
-    <value>Keep custom awakeness state until a specific date and time</value>
+  <data name="Awake_ExpirationSettingsExpander.Description" xml:space="preserve">
+    <value>Keep custom awake state until a specific date and time</value>
   </data>
   <data name="Awake_ModeSettingsCard.Header" xml:space="preserve">
     <value>Mode</value>
@@ -1849,6 +1849,12 @@ From there, simply click on one of the supported files in the File Explorer and
   <data name="Awake_IntervalMinutesInput.Header" xml:space="preserve">
     <value>Minutes</value>
   </data>
+  <data name="Awake_ExpirationSettingsExpander_Date.Header" xml:space="preserve">
+    <value>End date</value>
+  </data>
+  <data name="Awake_ExpirationSettingsExpander_Time.Header" xml:space="preserve">
+    <value>End time</value>
+  </data>
   <data name="Oobe_Awake.Title" xml:space="preserve">
     <value>Awake</value>
     <comment>Module name, do not loc</comment>
@@ -2129,7 +2135,7 @@ From there, simply click on one of the supported files in the File Explorer and
   <data name="Awake_IntervalSettingsCard.Header" xml:space="preserve">
     <value>Interval before returning to the previous awakeness state</value>
   </data>
-  <data name="Awake_ExpirationSettingsCard.Header" xml:space="preserve">
+  <data name="Awake_ExpirationSettingsExpander.Header" xml:space="preserve">
     <value>End date and time</value>
   </data>
   <data name="MouseUtils.ModuleTitle" xml:space="preserve">
diff --git a/src/settings-ui/Settings.UI/Views/AwakePage.xaml b/src/settings-ui/Settings.UI/Views/AwakePage.xaml
index 29823d4fe7..749737ab04 100644
--- a/src/settings-ui/Settings.UI/Views/AwakePage.xaml
+++ b/src/settings-ui/Settings.UI/Views/AwakePage.xaml
@@ -55,21 +55,28 @@
                         </ComboBox>
                     </labs:SettingsCard>
 
-                    <labs:SettingsCard
-                        x:Uid="Awake_ExpirationSettingsCard"
+                    <labs:SettingsExpander
+                        x:Uid="Awake_ExpirationSettingsExpander"
                         HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xEC92;}"
-                        Visibility="{x:Bind ViewModel.IsExpirationConfigurationEnabled, Mode=OneWay}">
-                        <StackPanel Orientation="Horizontal">
-                            <DatePicker Date="{x:Bind ViewModel.ExpirationDateTime, Mode=TwoWay}"></DatePicker>
-                            <TimePicker Margin="8,0,0,0" Time="{x:Bind ViewModel.ExpirationTime, Mode=TwoWay}" ClockIdentifier="24HourClock"></TimePicker>
-                        </StackPanel>
-                    </labs:SettingsCard>
-                    
+                        Visibility="{x:Bind ViewModel.IsExpirationConfigurationEnabled, Mode=OneWay}" IsExpanded="True">
+                        <labs:SettingsExpander.Items>
+                            <labs:SettingsCard
+                                x:Uid="Awake_ExpirationSettingsExpander_Date">
+                                <DatePicker Date="{x:Bind ViewModel.ExpirationDateTime, Mode=TwoWay}"></DatePicker>
+                            </labs:SettingsCard>
+                            <labs:SettingsCard
+                                x:Uid="Awake_ExpirationSettingsExpander_Time">
+                                <TimePicker Time="{x:Bind ViewModel.ExpirationTime, Mode=TwoWay}" ClockIdentifier="24HourClock"></TimePicker>
+                            </labs:SettingsCard>
+                        </labs:SettingsExpander.Items>
+                    </labs:SettingsExpander>
+
                     <labs:SettingsCard
                         x:Uid="Awake_IntervalSettingsCard"
                         HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xE916;}"
                         Visibility="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}">
-                        <StackPanel Orientation="Horizontal">
+
+                        <StackPanel Orientation="Horizontal" MinWidth="{StaticResource SettingActionControlMinWidth}">
                             <NumberBox
                                 x:Uid="Awake_IntervalHoursInput"
                                 Width="96"