[ui] Small-screen styles for exec window (#19332)

* Phones can exec too * De-magic breakpoints
hashicorp · Dec 11, 2023 · 268e92e · 268e92e
1 parent 99d72b7
commit 268e92e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/.changelog/19332.txt b/.changelog/19332.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: make the exec window look nicer on mobile screens
+```
diff --git a/ui/app/styles/components/exec-window.scss b/ui/app/styles/components/exec-window.scss
@@ -155,3 +155,24 @@
     }
   }
 }
+// Media query for small screens
+@media ($breakpoint-mobile) {
+  .exec-window {
+    width: 100vw;
+    height: 100vh;
+    flex-direction: column;
+    position: static;
+    .task-group-tree {
+      flex: 0 0 auto;
+      min-height: 50px;
+      max-height: 300px;
+      overflow-y: auto;
+      width: 100%;
+    }
+    .terminal-container {
+      flex: 1 0 auto;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
diff --git a/ui/app/styles/core/variables.scss b/ui/app/styles/core/variables.scss
@@ -65,3 +65,7 @@ $control-padding-vertical: calc(0.375em - #{$control-border-width});
 $control-padding-horizontal: calc(0.625em - #{$control-border-width});
 $button-padding-vertical: calc(0.375em - #{$button-border-width});
 $button-padding-horizontal: 0.75em;
+
+$breakpoint-mobile: 'max-width: 768px';
+$breakpoint-tablet: 'min-width: 769px';
+$breakpoint-desktop: 'min-width: 1088px';