Merge pull request #105 from aws/dogusata/fix-content-left-shift-when…

…-width-set-to-0-temporarily

Dogusata/fix content left shift when width set to 0 temporarily

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aws/mynah-ui",
   "displayName": "AWS Mynah UI",
-  "version": "4.15.9",
+  "version": "4.15.10",
   "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
   "publisher": "Amazon Web Services",
   "license": "Apache License 2.0",

src/helper/dom.ts

@@ -80,6 +80,7 @@ export class DomBuilder {
   private constructor (rootSelector: string) {
     this.root = DS(rootSelector)[0] as ExtendedHTMLElement;
     this.extendDomFunctionality(this.root);
+    this.root.addClass('mynah-ui-root');
     this.rootFocus = this.root.matches(':focus') ?? false;
     this.attachRootFocusListeners();
   }

src/styles/components/_main-container.scss

@@ -1,8 +1,16 @@
+body.mynah-ui-root {
+    min-width: 100vw;
+    min-height: 100vh;
+}
+
 #mynah-wrapper {
+    container-type: size;
+    container-name: mynah-wrapper;
     display: flex;
     flex-flow: column nowrap;
     margin: 0 auto;
-    width: 100%;
+    width: inherit;
+    min-width: inherit;
     max-width: var(--mynah-max-width);
     box-sizing: border-box;
     height: 100%;
@@ -13,9 +21,20 @@
     background-color: var(--mynah-color-bg);
     color: var(--mynah-color-text-default);
 
+    > .mynah-no-tabs-wrapper:not(.hidden) {
+        & + .mynah-ui-tab-contents-wrapper {
+            display: none;
+        }
+    }
     > .mynah-ui-tab-contents-wrapper {
-        flex: 1;
         position: relative;
+        width: inherit;
+        min-width: inherit;
+        max-width: inherit;
+        display: block;
+        height: inherit;
+        flex: 1;
+
         &:first-child {
             > .mynah-chat-wrapper {
                 display: flex;
@@ -43,3 +62,10 @@
         outline: none;
     }
 }
+
+@container mynah-wrapper (max-width: 0px) {
+    * {
+        display: none !important;
+        content-visibility: hidden !important;
+    }
+}

src/styles/components/chat/_chat-prompt-wrapper.scss

@@ -247,6 +247,7 @@
     & + .mynah-chat-prompt-input-info {
         padding-top: 0;
         margin-top: calc(-1 * var(--mynah-sizing-2));
+        flex-basis: fit-content;
     }
 }
 

src/styles/components/chat/_chat-wrapper.scss

@@ -7,29 +7,31 @@
     align-items: flex-start;
 }
 .mynah-chat-wrapper {
-    transition: var(--mynah-bottom-panel-transition);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    height: auto;
+    // This allows us to recalculate depending on the screen width went to 0 and reverted back (VSCode panel close/open)
+    transition: all 10ms 10ms linear;
+
+    position: relative;
+    width: inherit;
+    min-width: inherit;
+    max-width: inherit;
+    height: 100%;
+    flex: 1 0 100%;
     flex-flow: column nowrap;
     overflow: hidden;
     justify-content: space-around;
     align-items: stretch;
     display: none;
-    > div[class^="mynah-chat"] {
-        width: 100%;
-        max-width: 100%;
+    > div[class^='mynah-chat'] {
+        width: inherit;
+        min-width: inherit;
+        max-width: inherit;
         box-sizing: border-box;
         padding-left: var(--mynah-sizing-4);
         padding-right: var(--mynah-sizing-4);
     }
     &:after {
         transition: var(--mynah-very-short-transition);
-        content: "";
+        content: '';
         position: absolute;
         top: 0;
         right: 0;
@@ -45,16 +47,16 @@
         transform-origin: center center;
     }
 
-    @import "chat-items-container";
-    @import "chat-overflowing-intermediate-block";
-    @import "chat-prompt-wrapper";
+    @import 'chat-items-container';
+    @import 'chat-overflowing-intermediate-block';
+    @import 'chat-prompt-wrapper';
 }
 
 .mynah-chat-items-container,
 .mynah-chat-prompt-input-sticky-card {
-    @import "chat-item-card";
+    @import 'chat-item-card';
 }
 
-@import "chat-command-selector";
-@import "chat-item-tree-view";
-@import "chat-prompt-attachment";
+@import 'chat-command-selector';
+@import 'chat-item-tree-view';
+@import 'chat-prompt-attachment';