Преглед изворни кода

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

Bootstrap 5.3's `.modal-header` no longer sets `justify-content: space-between`.
Right-alignment of the header's close affordance now relies solely on it being a
direct flex child with `margin-left: auto`, which Bootstrap applies only to
`.btn-close`.

When `ModalHeader`'s `close` prop receives a wrapper element — a span/div grouping
`ExpandOrContractButton` with the close button, or a custom icon button — that
element is not a `.btn-close`, so it rendered immediately after the title instead
of at the right edge. Add `ms-auto` to the close wrapper to push it to the right.

Affected modals:
- DescendantsPageListModal
- PageAccessoriesModal
- HandsontableModal
- ConflictDiffModal
- AiAssistantManagementHeader (AI assistant management modal)
- GrantSelector (select group modal)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Yuki Takei пре 1 недеља
родитељ
комит
ec96c912b6

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

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

+ 1 - 1
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"

+ 1 - 1
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>

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

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