✨ Integrate responsive design for RecurringSchedulePicker component (#5733)

packages/desktop-client/src/components/select/RecurringSchedulePicker.tsx

@@ -10,12 +10,14 @@ import {
 import { useTranslation, Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
+import { useResponsive } from '@actual-app/components/hooks/useResponsive';
 import { SvgAdd, SvgSubtract } from '@actual-app/components/icons/v0';
 import { InitialFocus } from '@actual-app/components/initial-focus';
 import { Input } from '@actual-app/components/input';
 import { Menu } from '@actual-app/components/menu';
 import { Popover } from '@actual-app/components/popover';
 import { Select } from '@actual-app/components/select';
+import { SpaceBetween } from '@actual-app/components/space-between';
 import { Stack } from '@actual-app/components/stack';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
@@ -32,6 +34,7 @@ import {
 
 import { DateSelect } from './DateSelect';
 
+import { Modal } from '@desktop-client/components/common/Modal';
 import { Checkbox } from '@desktop-client/components/forms';
 import { useDateFormat } from '@desktop-client/hooks/useDateFormat';
 import { useLocale } from '@desktop-client/hooks/useLocale';
@@ -477,13 +480,7 @@ function RecurringScheduleTooltip({
           />
         )}
       </div>
-      <Stack
-        direction="row"
-        align="center"
-        justify="flex-start"
-        style={{ marginTop: 10 }}
-        spacing={1}
-      >
+      <SpaceBetween direction="horizontal" style={{ marginTop: 10 }} gap={5}>
         <Text style={{ whiteSpace: 'nowrap' }}>
           <Trans>Repeat every</Trans>
         </Text>
@@ -503,7 +500,6 @@ function RecurringScheduleTooltip({
           options={FREQUENCY_OPTIONS.map(opt => [opt.id, opt.name])}
           value={config.frequency}
           onChange={value => updateField('frequency', value)}
-          style={{ marginRight: 5 }}
         />
         {config.frequency === 'monthly' &&
         (config.patterns == null || config.patterns.length === 0) ? (
@@ -516,7 +512,7 @@ function RecurringScheduleTooltip({
             <Trans>Add specific days</Trans>
           </Button>
         ) : null}
-      </Stack>
+      </SpaceBetween>
       {config.frequency === 'monthly' &&
         config.patterns &&
         config.patterns.length > 0 && (
@@ -603,6 +599,7 @@ export function RecurringSchedulePicker({
   onChange,
 }: RecurringSchedulePickerProps) {
   const { t } = useTranslation();
+  const { isNarrowWidth } = useResponsive();
   const triggerRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const dateFormat = useDateFormat() || 'MM/dd/yyyy';
@@ -618,6 +615,14 @@ export function RecurringSchedulePicker({
     [locale, value, dateFormat],
   );
 
+  const tooltip = (
+    <RecurringScheduleTooltip
+      config={value}
+      onClose={() => setIsOpen(false)}
+      onSave={onSave}
+    />
+  );
+
   return (
     <View>
       <Button
@@ -628,19 +633,30 @@ export function RecurringSchedulePicker({
         {value ? recurringDescription : t('No recurring date')}
       </Button>
 
-      <Popover
-        triggerRef={triggerRef}
-        style={{ padding: 10, minWidth: 380, width: 'auto', maxWidth: '100%' }}
-        placement="bottom start"
-        isOpen={isOpen}
-        onOpenChange={() => setIsOpen(false)}
-      >
-        <RecurringScheduleTooltip
-          config={value}
+      {isNarrowWidth ? (
+        <Modal
+          name="recurring-schedule-picker"
+          isOpen={isOpen}
           onClose={() => setIsOpen(false)}
-          onSave={onSave}
-        />
-      </Popover>
+        >
+          {tooltip}
+        </Modal>
+      ) : (
+        <Popover
+          triggerRef={triggerRef}
+          style={{
+            padding: 10,
+            minWidth: 380,
+            width: 'auto',
+            maxWidth: '100%',
+          }}
+          placement="bottom start"
+          isOpen={isOpen}
+          onOpenChange={() => setIsOpen(false)}
+        >
+          {tooltip}
+        </Popover>
+      )}
     </View>
   );
 }

upcoming-release-notes/5733.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Mobile: open recurring schedule picker in modal