Merge pull request #11269 from growilabs/fix/modal-header-close-button-alignment

fix(client): right-align ModalHeader close content wrapped in a custom element

apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.tsx

@@ -112,7 +112,7 @@ const DescendantsPageListModalSubstance = ({
 
   const buttons = useMemo(
     () => (
-      <span className="me-3">
+      <span className="ms-auto me-3">
         <ExpandOrContractButton
           isWindowExpanded={isWindowExpanded}
           expandWindow={expandWindow}

apps/app/src/client/components/PageAccessoriesModal/PageAccessoriesModal.tsx

@@ -118,7 +118,7 @@ const PageAccessoriesModalSubstance = ({
 
   const buttons = useMemo(
     () => (
-      <span className="me-3">
+      <span className="ms-auto me-3">
         <ExpandOrContractButton
           isWindowExpanded={isWindowExpanded}
           expandWindow={expandWindow}

apps/app/src/client/components/PageEditor/ConflictDiffModal/ConflictDiffModal.tsx

@@ -100,7 +100,7 @@ const ConflictDiffModalSubstance = (
 
   const headerButtons = useMemo(
     () => (
-      <div className="d-flex align-items-center">
+      <div className="d-flex align-items-center ms-auto">
         <button
           type="button"
           className="btn"

apps/app/src/client/components/PageEditor/EditorNavbarBottom/GrantSelector.tsx

@@ -377,7 +377,7 @@ export const GrantSelector = (props: Props): JSX.Element => {
     return (
       <button
         type="button"
-        className="btn border-0 text-muted"
+        className="btn border-0 text-muted ms-auto"
         onClick={() => setIsSelectGroupModalShown(false)}
       >
         <span className="material-symbols-outlined">close</span>

apps/app/src/client/components/PageEditor/HandsontableModal/HandsontableModal.tsx

@@ -489,7 +489,7 @@ const HandsontableModalSubstance = (
   });
 
   const closeButton = (
-    <span>
+    <span className="ms-auto">
       <ExpandOrContractButton
         isWindowExpanded={isWindowExpanded}
         contractWindow={contractWindow}

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementHeader.tsx

@@ -29,7 +29,7 @@ export const AiAssistantManagementHeader = (props: Props): JSX.Element => {
     <ModalHeader
       tag="h4"
       close={
-        <button type="button" className="btn p-0" onClick={close}>
+        <button type="button" className="btn p-0 ms-auto" onClick={close}>
           <span className="material-symbols-outlined">close</span>
         </button>
       }