Merge pull request #190 from epam/EPMUII-8820-main-app-layout-broken-on-mobile-devies

EPMUII-8820: fixing of main app layout for mobile devices completed

Author: DanilRostov

src/ui/Button/Button.module.css

@@ -48,11 +48,21 @@ button:hover,
   background-color: var(--red);
 }
 
+.button > svg {
+  width: 42px;
+  height: 42px;
+}
+
 @media screen and (min-width: 768px) {
   .reset {
     display: flex;
     justify-content: flex-end;
   }
+
+  .button > svg {
+    width: 24px;
+    height: 24px;
+  }
 }
 .reset {
   display: inline-block;
@@ -82,11 +92,6 @@ button:hover,
   border-radius: 36px;
 }
 
-.button > svg {
-  width: 24px;
-  height: 24px;
-}
-
 .rounded {
   overflow: hidden;
   border-radius: 50%;

src/ui/Header/Header.module.css

@@ -1,10 +1,25 @@
 .header {
   display: flex;
   gap: 5px;
+  width: 95%;
+  min-width: 432px;
+  justify-content: space-between;
   z-index: 12;
 }
 
 .header_button {
   font-size: 0;
-  background-color: white;
+  background-color: inherit;
+}
+
+@media screen and (min-width: 768px) {
+  .header {
+    gap: 5px;
+    justify-content: flex-end;
+  }
+
+  .header_button {
+    font-size: 0;
+    background-color: white;
+  }
 }

src/ui/Main.module.css

@@ -27,9 +27,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: row-reverse;
-  width: 100vw;
-  right: 0;
+  flex-direction: row;
+  width: 96vw;
   height: 50px;
   padding: 1rem;
   background-color: var(--beige);
@@ -116,12 +115,14 @@
 
   .header__right {
     display: flex;
+    flex-direction: row-reverse;
     justify-content: flex-start;
     flex-wrap: nowrap;
     align-items: center;
     margin-left: auto;
     position: static;
     background: inherit;
+    right: 0;
   }
 
   .left {

src/ui/OpenFile/UiReportMenu.js

@@ -46,9 +46,8 @@ export const UiReportMenu = () => {
   const strDisabled = !isLoadedLocal;
   return (
     <>
-      <Tooltip content="Show tags">
+      <Tooltip content="About">
         <UIButton
-          text="About"
           cx={cx(css.button, css['report-menu__report'])}
           icon="report"
           rounded
@@ -59,7 +58,6 @@ export const UiReportMenu = () => {
       </Tooltip>
       <Tooltip content="Screenshot">
         <UIButton
-          text="Screenshot"
           cx={cx(css.button, css['report-menu__camera'])}
           icon="camera"
           rounded

src/ui/OpenFile/UiSaveMenu.js

@@ -29,9 +29,8 @@ export const UiSaveMenu = () => {
   };
   return (
     <>
-      <Tooltip content="Save Nifti">
+      <Tooltip content="Download">
         <UIButton
-          text="Download"
           cx={cx(css.button, css['download__link'])}
           rounded
           icon="download"