Prevent "Remove access" text being cut off in Share model (#30976)

GitOrigin-RevId: ed577d83afd150d64c99bd6577d7543d9297f91a

services/web/frontend/extracted-translations.json

@@ -246,9 +246,6 @@
   "change_email_address": "",
   "change_how_you_see_the_editor": "",
   "change_language": "",
-  "change_or_cancel-cancel": "",
-  "change_or_cancel-change": "",
-  "change_or_cancel-or": "",
   "change_owner": "",
   "change_password": "",
   "change_password_in_account_settings": "",

services/web/frontend/js/features/share-project-modal/components/edit-member.tsx

@@ -202,12 +202,6 @@ export default function EditMember({
         </OLCol>
 
         <OLCol xs={4} className="project-member-actions">
-          {confirmRemoval && (
-            <ChangePrivilegesActions
-              handleReset={() => setPrivileges(member.privileges)}
-            />
-          )}
-
           <div className="project-member-select">
             {hasBeenDowngraded && !confirmRemoval && (
               <MaterialIcon type="warning" className="project-member-warning" />
@@ -224,6 +218,12 @@ export default function EditMember({
               canAddCollaborators={canAddCollaborators}
             />
           </div>
+
+          {confirmRemoval && (
+            <ChangePrivilegesActions
+              handleReset={() => setPrivileges(member.privileges)}
+            />
+          )}
         </OLCol>
       </OLFormGroup>
     </form>
@@ -325,21 +325,19 @@ function ChangePrivilegesActions({
   const { t } = useTranslation()
 
   return (
-    <div className="text-center">
+    <div className="text-center d-flex gap-1 me-3">
-      <OLButton type="submit" size="sm" variant="primary">
-        {t('change_or_cancel-change')}
-      </OLButton>
-      <div className="text-sm">
-        {t('change_or_cancel-or')}
-        &nbsp;
       <OLButton
-          variant="link"
+        type="submit"
-          className="btn-inline-link"
+        size="sm"
+        variant="secondary"
         onClick={handleReset}
       >
-          {t('change_or_cancel-cancel')}
+        {t('cancel')}
+      </OLButton>
+
+      <OLButton type="submit" size="sm" variant="primary">
+        {t('confirm')}
       </OLButton>
-      </div>
     </div>
   )
 }

services/web/frontend/stylesheets/pages/editor/share.scss

@@ -185,6 +185,7 @@
     align-items: center;
     justify-content: flex-end;
     padding: 0;
+    flex-wrap: wrap;
   }
 
   .project-member-select {

services/web/locales/da.json

@@ -229,9 +229,6 @@
   "change": "Ændr",
   "change_currency": "Ændr valuta",
   "change_language": "Skift sprog",
-  "change_or_cancel-cancel": "anuller",
-  "change_or_cancel-change": "Ændr",
-  "change_or_cancel-or": "eller",
   "change_owner": "Skift ejer",
   "change_password": "Skift Kodeord",
   "change_password_in_account_settings": "Skift kodeord i kontoindstillingerne",

services/web/locales/de.json

@@ -168,9 +168,6 @@
   "category_relations": "Beziehungen",
   "change": "Änderung",
   "change_currency": "Währung wechseln",
-  "change_or_cancel-cancel": "Abbrechen",
-  "change_or_cancel-change": "Ändern",
-  "change_or_cancel-or": "oder",
   "change_owner": "Besitzer ändern",
   "change_password": "Passwort ändern",
   "change_plan": "Abonnement ändern",

services/web/locales/en.json

@@ -312,9 +312,6 @@
   "change_email_address": "Change email address",
   "change_how_you_see_the_editor": "Change how you see the editor using the updated <strong>Appearance</strong> settings.",
   "change_language": "Change language",
-  "change_or_cancel-cancel": "cancel",
-  "change_or_cancel-change": "Change",
-  "change_or_cancel-or": "or",
   "change_owner": "Change owner",
   "change_password": "Change password",
   "change_password_in_account_settings": "Change password in Account settings",

services/web/locales/fr.json

@@ -191,9 +191,6 @@
   "category_relations": "Relations",
   "change": "Modifier",
   "change_currency": "Changer de devise",
-  "change_or_cancel-cancel": "annuler",
-  "change_or_cancel-change": "Changer",
-  "change_or_cancel-or": "ou",
   "change_owner": "Changer de propriétaire",
   "change_password": "Changer de mot de passe",
   "change_password_in_account_settings": "Changer le mot de passe dans les Paramètres du Compte",

services/web/locales/sv.json

@@ -111,9 +111,6 @@
   "category_operators": "Operatorer",
   "category_relations": "Relationer",
   "change": "Ändra",
-  "change_or_cancel-cancel": "avbryt",
-  "change_or_cancel-change": "Ändra",
-  "change_or_cancel-or": "eller",
   "change_owner": "Ändra ägare",
   "change_password": "Byt lösenord",
   "change_plan": "Byta betalningsplan",

services/web/locales/zh-CN.json

@@ -279,9 +279,6 @@
   "change": "修改",
   "change_currency": "更改货币",
   "change_language": "更改语言",
-  "change_or_cancel-cancel": "取消",
-  "change_or_cancel-change": "修改",
-  "change_or_cancel-or": "或者",
   "change_owner": "更改所有者",
   "change_password": "更换密码",
   "change_password_in_account_settings": "在帐户设置中更改密码",

services/web/test/frontend/features/share-project-modal/components/share-project-modal.test.tsx

@@ -529,7 +529,7 @@ describe('<ShareProjectModal/>', function () {
       next: 'Remove access',
     })
     const removeButton = screen.getByRole('button', {
-      name: 'Change',
+      name: 'Confirm',
     })
     fireEvent.click(removeButton)