kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-01 16:05:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Phones can exec too

* De-magic breakpoints
This commit is contained in:
Phil Renaud
2023-12-11 09:42:25 -05:00
committed by GitHub
parent 99d72b7154
commit 268e92eaba
3 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/19332.txt Normal file
View File

@@ -0,0 +1,3 @@
```release-note:improvement
ui: make the exec window look nicer on mobile screens
```

21
ui/app/styles/components/exec-window.scss
View File

@@ -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;
}
}
}

4
ui/app/styles/core/variables.scss
View File

@@ -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';