From f330d61ce9bccc00ac65b0f2a65c7e298e214d93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 18 Apr 2024 17:04:13 +0100
Subject: [PATCH 1/5] web: Allow influence Popup size

By ignoring the PF/Modal's `variant` prop and adding `blockSize` and
`inlineSize` to core/Popup.

In addition to "auto", they support "small", "medium", and "large"
values that are converted into CSS classes to set the component size
based on the viewport.

The intention is to keep the dialog at a constant size regardless of its
content.

Developers should decide which size is best for a dialog based on its
content and behavior.
---
 web/src/assets/styles/utilities.scss | 57 ++++++++++++++++++++++++++++
 web/src/components/core/Popup.jsx    | 19 +++++++---
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index f4303c8617..31c96d36fc 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -155,6 +155,63 @@
   --stack-gutter: 0;
 }
 
+.block-size-auto {
+  block-size: auto;
+}
+
+
+.inline-size-auto {
+  inline-size: auto;
+}
+
+.block-size-small,
+.block-size-medium,
+.block-size-large {
+  block-size: calc(100dvb - var(--space-large));
+}
+
+.inline-size-small,
+.inline-size-medium,
+.inline-size-large {
+  inline-size: calc(100dvi - var(--spacer-large));
+}
+
+@media (height > 500px) {
+  .block-size-small {
+    block-size: 30dvb;
+  }
+
+  .block-size-medium {
+    block-size: 60dvb;
+  }
+
+  .block-size-large {
+    block-size: 90dvb;
+  }
+}
+
+@media (width > 500px) {
+  .inline-size-small,
+  .inline-size-medium,
+  .inline-size-large {
+    min-inline-size: calc(500px - var(--spacer-large));
+  }
+
+  .inline-size-small {
+    inline-size: 30dvi;
+  }
+
+  .inline-size-medium {
+    inline-size: 60dvi;
+    max-inline-size: var(--ui-max-inline-size);
+  }
+
+  .inline-size-large {
+    inline-size: 90dvi;
+    max-inline-size: calc(var(--ui-max-inline-size) * 2);
+  }
+}
+
 .large {
   /** block-size fallbacks **/
   height: 95dvh;
diff --git a/web/src/components/core/Popup.jsx b/web/src/components/core/Popup.jsx
index 4c60cc01b0..c54af1344d 100644
--- a/web/src/components/core/Popup.jsx
+++ b/web/src/components/core/Popup.jsx
@@ -187,27 +187,34 @@ const AncillaryAction = ({ children, ...actionsProps }) => (
  *     </Popup.Actions>
  *   </Popup>
  *
- * @param {ModalProps} props
+ * @typedef {object} PopupBaseProps
+ * @property {"auto" | "small" | "medium" | "large"} [blockSize="auto"] - The block/height size for the dialog. Default is auto.
+ * @property {"auto" | "small" | "medium" | "large"} [inlineSize="auto"] - The inline/width size for the dialog. Default is auto.
+ * @typedef {Omit<ModalProps, "variant" | "size"> & PopupBaseProps} PopupProps
+ *
+ * @param {PopupProps} props
  */
 const Popup = ({
   isOpen = false,
   showClose = false,
-  variant = "small",
+  inlineSize = "medium",
+  blockSize = "auto",
+  className = "",
   children,
-  ...pfModalProps
+  ...props
 }) => {
   const [actions, content] = partition(React.Children.toArray(children), child => child.type === Actions);
 
   return (
     /** @ts-ignore */
     <Modal
-      { ...pfModalProps }
+      {...props}
       isOpen={isOpen}
       showClose={showClose}
-      variant={variant}
       actions={actions}
+      className={`${className} block-size-${blockSize} inline-size-${inlineSize}`.trim()}
     >
-      { content }
+      {content}
     </Modal>
   );
 };

From 8163d5adc34702eb9ce083bfe8d0adeca4d4af9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 19 Apr 2024 08:26:40 +0100
Subject: [PATCH 2/5] web: Adapt popups to use blockSize and inlineSize props

Only when needed.
---
 web/src/components/core/FileViewer.jsx               |  3 ++-
 web/src/components/core/Terminal.jsx                 |  3 ++-
 web/src/components/l10n/L10nPage.jsx                 |  6 +++---
 web/src/components/network/IpSettingsForm.jsx        |  6 +++++-
 web/src/components/network/WifiSelector.jsx          |  6 +++++-
 web/src/components/storage/DeviceSelectionDialog.jsx |  3 ++-
 web/src/components/storage/ProposalActionsDialog.jsx | 10 ++++++----
 web/src/components/storage/SpacePolicyDialog.jsx     |  3 ++-
 web/src/components/users/FirstUser.jsx               | 12 ++++++++----
 web/src/components/users/RootPasswordPopup.jsx       |  2 +-
 10 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/web/src/components/core/FileViewer.jsx b/web/src/components/core/FileViewer.jsx
index 97370e1f22..8fa58990aa 100644
--- a/web/src/components/core/FileViewer.jsx
+++ b/web/src/components/core/FileViewer.jsx
@@ -60,7 +60,8 @@ export default function FileViewer({ file, title, onCloseCallback }) {
     <Popup
       isOpen={isOpen}
       title={title || file}
-      className="large"
+      blockSize="large"
+      inlineSize="large"
     >
       {state === "loading" && <Loading text={_("Reading file...")} />}
       {(content === null || error) &&
diff --git a/web/src/components/core/Terminal.jsx b/web/src/components/core/Terminal.jsx
index c07e26ad2d..b718b8ce6a 100644
--- a/web/src/components/core/Terminal.jsx
+++ b/web/src/components/core/Terminal.jsx
@@ -38,8 +38,9 @@ export default function Terminal({ onCloseCallback }) {
   return (
     <Popup
       isOpen={isOpen}
-      className="large"
       aria-label="terminal popup"
+      blockSize="large"
+      inlineSize="large"
     >
 
       <iframe className="vertically-centered" src="/cockpit/@localhost/system/terminal.html" />
diff --git a/web/src/components/l10n/L10nPage.jsx b/web/src/components/l10n/L10nPage.jsx
index 17516fbecf..d10458f0c9 100644
--- a/web/src/components/l10n/L10nPage.jsx
+++ b/web/src/components/l10n/L10nPage.jsx
@@ -65,7 +65,7 @@ const TimezonePopup = ({ onFinish = noop, onCancel = noop }) => {
       isOpen
       title={_("Select time zone")}
       description={sprintf(_("%s will use the selected time zone."), selectedProduct.name)}
-      className="height-75"
+      blockSize="large"
     >
       <Form id="timezoneForm" onSubmit={onSubmit}>
         <TimezoneSelector value={timezoneId} timezones={sortedTimezones} onChange={setTimezoneId} />
@@ -181,7 +181,7 @@ const LocalePopup = ({ onFinish = noop, onCancel = noop }) => {
       isOpen
       title={_("Select language")}
       description={sprintf(_("%s will use the selected language."), selectedProduct.name)}
-      className="height-75"
+      blockSize="large"
     >
       <Form id="localeForm" onSubmit={onSubmit}>
         <LocaleSelector value={localeId} locales={sortedLocales} onChange={setLocaleId} />
@@ -294,7 +294,7 @@ const KeymapPopup = ({ onFinish = noop, onCancel = noop }) => {
       isOpen
       title={_("Select keyboard")}
       description={sprintf(_("%s will use the selected keyboard."), selectedProduct.name)}
-      className="height-75"
+      blockSize="large"
     >
       <Form id="keymapForm" onSubmit={onSubmit}>
         <KeymapSelector value={keymapId} keymaps={sortedKeymaps} onChange={setKeymapId} />
diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx
index 8244590143..9ae9db2020 100644
--- a/web/src/components/network/IpSettingsForm.jsx
+++ b/web/src/components/network/IpSettingsForm.jsx
@@ -130,7 +130,11 @@ export default function IpSettingsForm({ connection, onClose }) {
   // TRANSLATORS: manual network configuration mode with a static IP address
   // %s is replaced by the connection name
   return (
-    <Popup isOpen title={sprintf(_("Edit %s"), connection.id)}>
+    <Popup
+      isOpen
+      title={sprintf(_("Edit %s"), connection.id)}
+      blockSize="medium"
+    >
       {renderError("object")}
       <Form id="edit-connection" onSubmit={onSubmit}>
         <FormGroup fieldId="method" label={_("Mode")} isRequired>
diff --git a/web/src/components/network/WifiSelector.jsx b/web/src/components/network/WifiSelector.jsx
index 9b68da5af6..d3c52733f4 100644
--- a/web/src/components/network/WifiSelector.jsx
+++ b/web/src/components/network/WifiSelector.jsx
@@ -131,7 +131,11 @@ function WifiSelector({ isOpen = false, onClose }) {
   });
 
   return (
-    <Popup isOpen={isOpen} title={_("Connect to a Wi-Fi network")}>
+    <Popup
+      isOpen={isOpen}
+      title={_("Connect to a Wi-Fi network")}
+      blockSize="medium"
+    >
       <WifiNetworksList
         networks={networksFromValues(networks)}
         hiddenNetwork={baseHiddenNetwork}
diff --git a/web/src/components/storage/DeviceSelectionDialog.jsx b/web/src/components/storage/DeviceSelectionDialog.jsx
index 09aa98fcd1..5efdeeb019 100644
--- a/web/src/components/storage/DeviceSelectionDialog.jsx
+++ b/web/src/components/storage/DeviceSelectionDialog.jsx
@@ -114,7 +114,8 @@ devices.").split(/[[\]]/);
     <Popup
       title={_("Device for installing the system")}
       isOpen={isOpen}
-      variant="medium"
+      blockSize="large"
+      inlineSize="large"
       {...props}
     >
       <Form id="target-form" onSubmit={onSubmit}>
diff --git a/web/src/components/storage/ProposalActionsDialog.jsx b/web/src/components/storage/ProposalActionsDialog.jsx
index 053f9d852c..003bed6e83 100644
--- a/web/src/components/storage/ProposalActionsDialog.jsx
+++ b/web/src/components/storage/ProposalActionsDialog.jsx
@@ -50,7 +50,7 @@ const ActionsList = ({ actions }) => {
  * @param {object} props
  * @param {object[]} [props.actions=[]] - The actions to perform in the system.
  * @param {boolean} [props.isOpen=false] - Whether the dialog is visible or not.
- * @param {function} props.onClose - Whether the dialog is visible or not.
+ * @param {() => void} props.onClose - Whether the dialog is visible or not.
  */
 export default function ProposalActionsDialog({ actions = [], isOpen = false, onClose }) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -68,14 +68,16 @@ export default function ProposalActionsDialog({ actions = [], isOpen = false, on
     // TRANSLATORS: show/hide toggle action, this is a clickable link
     : sprintf(n_("Show %d subvolume action", "Show %d subvolume actions", subvolActions.length), subvolActions.length);
 
+  const blockSize = actions.length < 15 ? "medium" : "large";
+
   return (
     <Popup
-      // TRANSLATORS: The storage "Planned Actions" section's title. The
-      // section shows a list of planned actions for the selected device, e.g.
+      // TRANSLATORS: The storage "Planned Actions" dialog's title. The
+      // dialog shows a list of planned actions for the selected device, e.g.
       // "delete partition A", "create partition B with filesystem C", ...
       title={_("Planned Actions")}
       isOpen={isOpen}
-      variant="large"
+      blockSize={subvolActions.length === 0 ? "auto" : blockSize}
     >
       <ActionsList actions={generalActions} />
       <If
diff --git a/web/src/components/storage/SpacePolicyDialog.jsx b/web/src/components/storage/SpacePolicyDialog.jsx
index 6de1a55a47..cfd8f70b92 100644
--- a/web/src/components/storage/SpacePolicyDialog.jsx
+++ b/web/src/components/storage/SpacePolicyDialog.jsx
@@ -149,7 +149,8 @@ in the devices listed below. Choose how to do it.");
       title={_("Find space")}
       description={description}
       isOpen={isOpen}
-      variant="medium"
+      blockSize="medium"
+      inlineSize="large"
       {...props}
     >
       <Form id="space-policy-form" onSubmit={onSubmit}>
diff --git a/web/src/components/users/FirstUser.jsx b/web/src/components/users/FirstUser.jsx
index 43138b9c92..bd0057c590 100644
--- a/web/src/components/users/FirstUser.jsx
+++ b/web/src/components/users/FirstUser.jsx
@@ -229,10 +229,14 @@ export default function FirstUser() {
 
   return (
     <>
-      { isUserDefined ? <UserData user={user} actions={actions} /> : <UserNotDefined actionCb={openForm} /> }
-      { /* TODO: Extract this form to a component, if possible */ }
-      { isFormOpen &&
-        <Popup isOpen title={isEditing ? _("Edit user account") : _("Create user account")}>
+      {isUserDefined ? <UserData user={user} actions={actions} /> : <UserNotDefined actionCb={openForm} />}
+      { /* TODO: Extract this form to a component, if possible */}
+      {isFormOpen &&
+        <Popup
+          isOpen
+          title={isEditing ? _("Edit user account") : _("Create user account")}
+          inlineSize="small"
+        >
           <Form id="createUser" onSubmit={(e) => accept("createUser", e)}>
             { showErrors() &&
               <Alert variant="warning" isInline title={_("Something went wrong")}>
diff --git a/web/src/components/users/RootPasswordPopup.jsx b/web/src/components/users/RootPasswordPopup.jsx
index c32d535988..34b2e6cda1 100644
--- a/web/src/components/users/RootPasswordPopup.jsx
+++ b/web/src/components/users/RootPasswordPopup.jsx
@@ -64,7 +64,7 @@ export default function RootPasswordPopup({
   const onPasswordValidation = (isValid) => setIsValidPassword(isValid);
 
   return (
-    <Popup title={title} isOpen={isOpen}>
+    <Popup title={title} isOpen={isOpen} inlineSize="small">
       <Form id="root-password" onSubmit={accept}>
         <PasswordAndConfirmationInput
           value={password}

From 5b371280184d668af22ce0527feefa9c8f93529e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 19 Apr 2024 08:30:53 +0100
Subject: [PATCH 3/5] web: CSS cleanup

CSS still needing much more love, but for now this commit just remove
some dead rules.
---
 web/src/assets/styles/app.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
index 8aa9b4e838..00a0a1da6c 100644
--- a/web/src/assets/styles/app.scss
+++ b/web/src/assets/styles/app.scss
@@ -55,20 +55,6 @@
   }
 }
 
-.auto-modal-popup {
-  block-size: auto;
-}
-
-.medium-modal-popup {
-  min-block-size: 55vh;
-  max-block-size: 55vh;
-}
-
-.large-modal-popup {
-  min-block-size: 85vh;
-  max-block-size: 85vh;
-}
-
 // *DataLists custom styles
 li.pf-v5-c-data-list__item {
   border-block-end-width: thin;

From 286592d100b82266b256fb5b5bbbd4f2dce0aa20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 19 Apr 2024 09:04:28 +0100
Subject: [PATCH 4/5] web: Fix core/Popup doc.

The default value for inlineSize porp is not "auto" but "medium".
---
 web/src/components/core/Popup.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/core/Popup.jsx b/web/src/components/core/Popup.jsx
index c54af1344d..df0b49abe2 100644
--- a/web/src/components/core/Popup.jsx
+++ b/web/src/components/core/Popup.jsx
@@ -188,8 +188,8 @@ const AncillaryAction = ({ children, ...actionsProps }) => (
  *   </Popup>
  *
  * @typedef {object} PopupBaseProps
- * @property {"auto" | "small" | "medium" | "large"} [blockSize="auto"] - The block/height size for the dialog. Default is auto.
- * @property {"auto" | "small" | "medium" | "large"} [inlineSize="auto"] - The inline/width size for the dialog. Default is auto.
+ * @property {"auto" | "small" | "medium" | "large"} [blockSize="auto"] - The block/height size for the dialog. Default is "auto".
+ * @property {"auto" | "small" | "medium" | "large"} [inlineSize="medium"] - The inline/width size for the dialog. Default is "medium".
  * @typedef {Omit<ModalProps, "variant" | "size"> & PopupBaseProps} PopupProps
  *
  * @param {PopupProps} props

From c30787606bf15905ce8f0189a011be13ec0fcde7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 19 Apr 2024 10:56:54 +0100
Subject: [PATCH 5/5] web: Use `blockSize="large"` in SpacePolicyDialog

As proposed in code review.
---
 web/src/components/storage/SpacePolicyDialog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/storage/SpacePolicyDialog.jsx b/web/src/components/storage/SpacePolicyDialog.jsx
index cfd8f70b92..829bd56e0b 100644
--- a/web/src/components/storage/SpacePolicyDialog.jsx
+++ b/web/src/components/storage/SpacePolicyDialog.jsx
@@ -149,7 +149,7 @@ in the devices listed below. Choose how to do it.");
       title={_("Find space")}
       description={description}
       isOpen={isOpen}
-      blockSize="medium"
+      blockSize="large"
       inlineSize="large"
       {...props}
     >