style: set ProfilePage header text to center

wanted-fork-fork · Dec 23, 2024 · df6e8ea · df6e8ea
1 parent 01bac5b
commit df6e8ea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/shared/ui/layout/Header/Header.module.css b/src/shared/ui/layout/Header/Header.module.css
@@ -5,6 +5,7 @@
   align-items: center;
   background-color: var(--color-neutral-0);
   z-index: 2;
+  position: relative;
 }
 
 .CloseButton {
@@ -14,6 +15,18 @@
 .Suffix {
   margin-left: auto;
 }
+
+.Content {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  align-items: center;
+}
+
 .Prefix {
   margin-right: auto;
 }
diff --git a/src/shared/ui/layout/Header/Header.tsx b/src/shared/ui/layout/Header/Header.tsx
@@ -26,7 +26,7 @@ export const Header = ({
         </Button>
       )}
       {prefixSlot && <span className={styles.Prefix}>{prefixSlot}</span>}
-      {children}
+      <span className={styles.Content}>{children}</span>
       {suffixSlot && <span className={styles.Suffix}>{suffixSlot}</span>}
       {onClose && (
         <Button