correcting header

SurveyFrontend/src/components/Account/Account.module.css

@@ -7,18 +7,27 @@
     padding: 4.58px 13px 4.58px 4.58px;
     margin: 26px 33px 27px 0;
     margin-left: auto;
+    display: inline-flex;
+    max-width: 100%;
+    min-width: fit-content;
 }
 
 .accountText{
+    width: 100%;
+    gap: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
     font-size: 24px;
     font-weight: 600;
     color: black;
-    width: 100%;
     text-decoration: none;
+    white-space: nowrap;
 }
 
 .accountImg{
     vertical-align: middle;
     width: 55px;
     margin-right: 9px;
-}
+    flex-shrink: 0;
+}

SurveyFrontend/src/components/Header/Header.tsx

@@ -4,6 +4,8 @@ import Account from "../Account/Account.tsx";
 import styles from './Header.module.css'
 import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx";
 
+
+
 const Header: React.FC = () => {
     const [activePage, setActivePage] = useState('Создать опрос');
 
@@ -26,4 +28,4 @@ const Header: React.FC = () => {
     );
 };
 
-export default Header;
+export default Header;

SurveyFrontend/src/components/PageSurvey/PageSurvey.module.css

@@ -17,6 +17,13 @@
 
 .active{
     color: #000000;
-    text-decoration: underline;
     text-decoration-color: #3881C8;
-}
+}
+
+.line{
+    border: 1px solid #000000;
+    width: 50%;
+    margin: 0 auto;
+    padding: 0;
+    box-shadow: 0 1px 4px 0 #3881C8;
+}

SurveyFrontend/src/components/PageSurvey/PageSurvey.tsx

@@ -10,11 +10,20 @@ interface PageSurveyProps{
 const PageSurvey: React.FC<PageSurveyProps> = ({name, isActive, onClick}) => {
     return (
         <li className={styles.pagesSurveyItem}>
-            <button className={`${styles.pageSurvey} ${isActive ? styles.active : ''}`} onClick={onClick}>
-                {name}
-            </button>
+            {isActive ? (
+                <>
+                    <button className={`${styles.pageSurvey} ${styles.active}`} onClick={onClick}>
+                        {name}
+                    </button>
+                    <hr className={styles.line}/>
+                </>
+            ) : (
+                <button className={`${styles.pageSurvey}`} onClick={onClick}>
+                    {name}
+                </button>
+            )}
         </li>
     );
 };
 
-export default PageSurvey;
+export default PageSurvey;