Fix css

redhat-developer · Jul 26, 2020 · e9ee8bd · e9ee8bd
1 parent 083a5cb
commit e9ee8bd
Showing 1 changed file with 72 additions and 5 deletions.
diff --git a/src/webview/pipeline/app/style.css b/src/webview/pipeline/app/style.css
@@ -8,18 +8,36 @@ body {
   padding-left: 31px;
 }
 
+@media screen and (max-width: 357px) {
+  body {
+    padding-left: 0px;
+  }
+}
+
 .grid-container {
   display: grid;
-  grid-template-rows: 734px 1fr 40px;
-  grid-template-areas: "main main" "main main" "buttons buttons";
   overflow: hidden;
   font-family: var(--vscode-font-family);
   font-size: var(--vscode-font-size);
   font-weight: var(--vscode-font-weight);
   height: 100vh;
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (max-width: 550px) {
+  .grid-container {
+    grid-template-areas: "main main" "main main" "buttons buttons";
+    grid-template-rows: 734px 1fr 40px;
+  }
+}
+
+@media screen and (max-width: 550px) and (min-height: 905px) {
+  .grid-container {
+    grid-template-areas: "main main" "main main" "buttons buttons";
+    grid-template-rows: 734px 121px;
+  }
+}
+
+@media screen and (min-width: 550px) {
   .grid-container {
     grid-template-areas: "navigation main" "navigation main" "navigation buttons";
     grid-template-columns: 160px 1fr;
@@ -51,6 +69,14 @@ body {
   grid-area: buttons;
 }
 
+@media screen and (max-width: 357px) {
+  .buttons {
+    position: relative;
+    right: 73px;
+    bottom: -2px;
+  }
+}
+
 .startButton-disable {
   height:22px;
   margin: -20px -50px;
@@ -65,6 +91,11 @@ body {
 }
 
 
+.startButton-disable:hover {
+  color: white;
+}
+
+
 .startButton {
   height:22px; 
   margin: -20px -50px; 
@@ -239,14 +270,32 @@ body {
   box-sizing: border-box;
   font-size: var(--vscode-font-size);
   position: relative;
-  width: 465px;
+  width: 300px;
   height: 26px;
   background-color: var(--vscode-settings-textInputBackground);
   color: var(--vscode-settings-textInputForeground);
   line-height: 1.4em!important;
   left: 0.5px;
 }
 
+@media screen and (max-width: 357px) {
+  .editor-input-box {
+    width: 184px;
+  }
+}
+
+@media screen and (min-width: 550px) {
+  .editor-input-box {
+    width: 307px;
+  }
+}
+
+@media screen and (min-width: 700px) {
+  .editor-input-box {
+    width: 465px;
+  }
+}
+
 .wrapper {
   position: relative;
   width: 100%;
@@ -361,7 +410,7 @@ body {
 }
 
 .editor-select-box {
-  width: 466px;
+  width: 300px;
   font-family: inherit;
   font-size: var(--vscode-font-size);
   border: 1px solid;
@@ -374,6 +423,24 @@ body {
   -webkit-appearance: none;
 }
 
+@media screen and (max-width: 357px) {
+  .editor-select-box {
+    width: 184px;
+  }
+}
+
+@media screen and (min-width: 550px) {
+  .editor-select-box {
+    width: 307px;
+  }
+}
+
+@media screen and (min-width: 700px) {
+  .editor-select-box {
+    width: 465px;
+  }
+}
+
 .editor-select-box:focus {
   outline-color: var(--vscode-focusBorder);
   outline-width: 1px;