fix online help layout

okfde · Aug 12, 2024 · 098f0a7 · 098f0a7
1 parent f40e335
commit 098f0a7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/frontend/javascript/components/postupload/app-shell.vue b/frontend/javascript/components/postupload/app-shell.vue
@@ -117,6 +117,7 @@ $breakpoint: 1000px;
 <style lang="scss" scoped>
 // TODO: again, arbitrary breakpoint
 $breakpoint: 1000px;
+$breakpoint-onlinehelp: 600px;
 $ci-accent-text: rgb(
   41,
   109,
@@ -287,25 +288,25 @@ $step-width: 10em;
 .appshell-help {
   position: fixed;
   right: 0;
-  // TODO this value was eyeballed from the bootstrap container width
-  width: calc((100vw - 1000px) / 2);
+  width: 20em;
+  max-width: 100%;
   top: $header-height;
   bottom: 0;
   overflow-y: scroll;
+  z-index: 100;
 
-  @media (max-width: $breakpoint) {
+  @media (max-width: $breakpoint-onlinehelp) {
     top: $header-height;
     left: 0;
     width: 100%;
     bottom: 0;
-    z-index: 100;
   }
 }
 
 .appshell-help-close {
   position: fixed;
-  right: 1em;
-  top: calc(1em + $header-height);
+  right: 0.5em;
+  top: calc(0.5em + $header-height);
   width: 3em;
   height: 3em;
   background: 0;

diff --git a/frontend/javascript/components/postupload/online-help.vue b/frontend/javascript/components/postupload/online-help.vue
@@ -53,9 +53,9 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .onlinehelp {
-  background-color: #fbde85;
+  background-color: transparentize(#fbde85, 0.05);
   min-height: 100%;
-  padding: 2em;
+  padding: 4em 2em 2em 2em;
 }
 .spinner {
   position: absolute;