Lots of UI tweaks

src/Sass/_ckEditor.scss

@@ -1,16 +1,13 @@
-@import './_esuiteVariables.scss';
+@import "./_esuiteVariables.scss";
 
 .form-editor {
-	min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
-    max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
+  width: 100%;
 }
 
 .mailTemplate-editor {
-	min-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
-    max-width: calc(100vw - ($leftMenuWidth + $gridGap + $mailtemplateNameListWidth + ($frameWorkAreaPadding * 2) + $spacePadding));
+  width: calc(100% - ($gridGap + $mailtemplateNameListWidth));
 }
 
-
 @media print {
   body {
     margin: 0 !important;
@@ -19,7 +16,7 @@
 
 .ck-main-container {
   // --ckeditor5-preview-height: 700px;
-	font-family: 'Lato';
+  font-family: "Lato";
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
@@ -35,7 +32,7 @@
 }
 
 .ck-content {
-	font-family: 'Lato';
+  font-family: "Lato";
   line-height: 1.6;
   word-break: break-word;
 
@@ -69,7 +66,9 @@
   border-right: 0;
 }
 
-.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar {
+.editor-container_document-editor
+  .editor-container__menu-bar
+  > .ck.ck-menu-bar {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   border-top: 0;
@@ -90,7 +89,9 @@
 // 	height: 100%;
 // }
 
-.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
+.editor-container_document-editor
+  .editor-container__editor
+  .ck.ck-editor__editable {
   box-sizing: border-box;
   //min-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
   //max-width: calc(100vw - ($leftMenuWidth + ($frameWorkAreaPadding * 2)));
@@ -111,7 +112,6 @@
   // margin-right: 72px;
 }
 
-
 .ck-toolbar {
   background: hsl(0, 0%, 100%);
   color: black;

src/Sass/_esuiteVariables.scss

@@ -24,7 +24,6 @@ $frameWorkAreaPadding: 16px;
 $mailtemplateNameListWidth: 245px;
 
 //Left Menu
-$leftMenuWidth: 70px;
 $leftMenu-background: #2c2c2e;
 $leftMenu-color: #ddd;
 $leftMenu-HoverColour: $blue;

src/Sass/_leftMenu.scss

@@ -9,12 +9,19 @@
   color: $leftMenu-submenu-open !important;
 }
 
+.leftMenuContainer {
+  position: relative;
+  height: 100%;
+}
+
 .leftMenu {
   height: 100%;
-    width: $leftMenuWidth;
+  width: fit-content;
+  min-width: 70px;
+  max-width: 200px;
   background-color: $leftMenu-background;
   color: $leftMenu-color;
-    padding-top: 5px;
+  padding: 5px 8px;
 }
 
 .LeftMenuItem {
@@ -51,6 +58,10 @@
 .leftMenuItemLabel {
   width: 100%;
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 8px;
 }
 
 .leftMenuSubMenu {
@@ -64,12 +75,14 @@
 .subbar {
   background-color: $leftMenu-background;
   height: 100%;
-    left: $leftMenuWidth;
-    position: fixed;
-    top: $headerHeight;
+  left: 100%;
+  position: absolute;
+  top: 0;
   width: 235px;
   z-index: 1000;
   border-left: 1px inset #999;
+  transform-origin: left;
+  animation: slideOut 0.3s ease-in-out;
 
   .header {
     color: $leftMenu-color;
@@ -97,3 +110,14 @@
     }
   }
 }
+
+@keyframes slideOut {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}

src/Sass/horizionalTabs.scss

@@ -1,7 +1,16 @@
 .horizionalTabs {
   .tab-list {
-      border-bottom: 1px solid #ccc;
     padding-left: 0;
+    display: flex;
+    align-items: bottom;
+
+    &::after {
+      content: "";
+      flex: 1;
+      margin-bottom: -1px;
+      border-bottom: 1px solid;
+      background-color: inherit;
+    }
   }
 
   .tab-list-item {
@@ -12,8 +21,14 @@
   }
 
   .tab-list-active {
-      background-color: white;
-      border: solid #ccc;
+    border: solid;
     border-width: 1px 1px 0 1px;
+    background-color: inherit;
+  }
+
+  .tab-list-inactive {
+    border: solid;
+    border-width: 0 0 1px 0;
+    background-color: inherit;
   }
 }

src/Sass/vars.scss

@@ -2,7 +2,6 @@
 $frameWorkAreaPadding: 16px;
 
 //Left Menu
-$leftMenuWidth: 70px;
 $leftMenu-background: #2c2c2e;
 $leftMenu-color: #ddd;
 $leftMenu-HoverColour: $blue;

src/components/common/HorizionalTabs.tsx

@@ -36,7 +36,6 @@ const HorizontalTabs: React.FC<HorizontalTabsProps> = ({
 
   return (
     <div className="horizionalTabs">
-      <div>
       <ul className="tab-list">
         {children.map((child) => {
           const { label } = child.props;
@@ -50,8 +49,6 @@ const HorizontalTabs: React.FC<HorizontalTabsProps> = ({
           );
         })}
       </ul>
-      </div>
-
       <div>{activeTabChildren}</div>
     </div>
   );

src/components/common/TabHeader.tsx

@@ -15,7 +15,7 @@ export default function TabHeader({
 
   const className = isActive
     ? "tab-list-item tab-list-active"
-    : "tab-list-item";
+    : "tab-list-item tab-list-inactive";
 
   return (
     <li className={className} onClick={handleClick}>

src/modules/frame/components/LeftMenu.tsx

@@ -62,7 +62,7 @@ const LeftMenu: React.FC = () => {
   const viewSupport = viewAuditLog || viewBlockedIPAddresses || viewErrorLogs;
 
   return (
-    <>
+    <div className="leftMenuContainer">
       <div className="leftMenu">
         <LeftMenuItem to="/" icon={faHome} label={t("Home")} />
 
@@ -124,7 +124,7 @@ const LeftMenu: React.FC = () => {
       </div>
 
       {openMenuItem && <div className="subbar">{openMenuItem.children}</div>}
-    </>
+    </div>
   );
 };