web: Adapt popups to use blockSize and inlineSize props

Only when needed.

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) &&

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" />

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} />

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>

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}

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}>

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

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}>

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")}>

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}