From 268e92eabaec798be5be019e9ba5440b5ec671f3 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Mon, 11 Dec 2023 09:42:25 -0500
Subject: [PATCH] [ui] Small-screen styles for exec window (#19332)

* Phones can exec too

* De-magic breakpoints
---
 .changelog/19332.txt                      |  3 +++
 ui/app/styles/components/exec-window.scss | 21 +++++++++++++++++++++
 ui/app/styles/core/variables.scss         |  4 ++++
 3 files changed, 28 insertions(+)
 create mode 100644 .changelog/19332.txt

diff --git a/.changelog/19332.txt b/.changelog/19332.txt
new file mode 100644
index 00000000000..16c49074b7f
--- /dev/null
+++ 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
index 989c17a813b..fec209e025b 100644
--- 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
index 7f24917eea7..407685ef3de 100644
--- 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';