use 100dvh everywhere

openstyles · Feb 9, 2025 · 739eeba · 739eeba
1 parent 149d41c
commit 739eeba
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 24 deletions.
diff --git a/src/css/global.css b/src/css/global.css
@@ -39,6 +39,10 @@
   --gold1: gold;
   --red1: hsl(0, 70%, 45%);
   --zebra: hsla(0, 0%, 50%, 0.05);
+  --100dvh: 100dvh;
+  @supports not (height: 1dvh) {
+    --100dvh: 100vh;
+  }
 }
 body {
   font: normal 12px var(--family);
@@ -47,8 +51,7 @@ body {
   margin: 0;
   hyphens: auto;
   .mobile > & {
-    height: 100vh; /* for old browsers */
-    height: 100dvh;
+    max-height: var(--100dvh);
   }
   &:lang(ja) {
     font-family: Arial, 'Meiryo UI', 'MS Gothic', system-ui, sans-serif;
@@ -61,7 +64,9 @@ body {
     font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
   }
 }
-
+.dvh100 {
+  height: var(--100dvh);
+}
 a {
   color: var(--fg);
   transition: color .1s;

diff --git a/src/edit.html b/src/edit.html
@@ -20,7 +20,7 @@
   </template>
 
   <template data-id="body"> <!-- https://crbug.com/1288447 -->
-    <div id="header">
+    <div id="header" class="dvh100">
       <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle">
         <a class="usercss-only icon hide-if-sticky"
            href="https://github.com/openstyles/stylus/wiki/Writing-UserCSS"
@@ -135,7 +135,7 @@ <h2><span i18n="linterIssues"></span><span id="issue-count"></span>
   </template>
 </head>
 
-<body id="stylus-edit">
+<body id="stylus-edit" class="dvh100">
   <%= htmlWebpackPlugin.tags.bodyTags %>
 </body>
 </html>
diff --git a/src/edit/edit.css b/src/edit/edit.css
@@ -8,10 +8,6 @@ $plus-minus-pad: .5rem;
   --target-gapY: 2px;
 }
 
-body {
-  height: 100vh;
-}
-
 #global-progress {
   position: fixed;
   height: 4px;
@@ -71,7 +67,6 @@ html:not(.is-new-style) #heading::before {
 /************ header ************/
 #header {
   width: var(--header-width);
-  height: 100vh;
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -677,7 +672,7 @@ i,
     padding: var(--pad-y2) var(--pad-x);
   }
   .contents {
-    max-height: calc(100vh - var(--top) - 4rem);
+    max-height: calc(var(--100dvh) - var(--top) - 4rem);
     overflow-y: auto;
     padding: var(--pad-y) var(--pad-x);
   }

diff --git a/src/install-usercss.html b/src/install-usercss.html
@@ -13,7 +13,7 @@
     <span i18n="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
   </template>
 </head>
-<body id="stylus-install-usercss">
+<body id="stylus-install-usercss" class="dvh100">
   <div id="header">
     <div id="header-contents">
       <h1 class="w100">

diff --git a/src/install-usercss/install-usercss.css b/src/install-usercss/install-usercss.css
@@ -1,7 +1,6 @@
 body {
   overflow: hidden;
   display: flex;
-  height: 100vh;
 }
 
 img.icon {

diff --git a/src/js/dlg/message-box.css b/src/js/dlg/message-box.css
@@ -24,7 +24,7 @@
     min-width: 10rem;
     max-width: 50vw;
     min-height: 5rem;
-    max-height: 90dvh;
+    max-height: calc(var(--100dvh) - 2*var(--gap));
     position: fixed;
     display: flex;
     flex-direction: column;

diff --git a/src/manage.html b/src/manage.html
@@ -106,7 +106,7 @@ <h2 class="style-name">
 
 <template data-id="body"> <!-- https://crbug.com/1288447 -->
 
-<div id="header">
+<div id="header" class="dvh100">
   <h1 i18n="styleManager"></h1>
 
   <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">

diff --git a/src/manage/manage.css b/src/manage/manage.css
@@ -13,7 +13,6 @@ $iconGapY: 4px;
 body {
   /* Fill the entire viewport to enable json import via drag'n'drop */
   display: flex;
-  height: 100vh;
 }
 
 #header:lang(ja) h1 {
@@ -49,7 +48,6 @@ a, .disabled a:hover {
   display: flex;
   flex-flow: column;
   width: var(--header-width);
-  height: 100vh;
   position: fixed;
   top: 0;
   padding: $pad;
@@ -677,7 +675,7 @@ button i {
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
+  height: var(--100dvh);
   border: 0;
   z-index: 2147483647;
   background-color: hsla(0, 0%, 0%, .45);

diff --git a/src/options.html b/src/options.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html id="stylus">
+<html id="stylus" class="dvh100">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/src/options/options.css b/src/options/options.css
@@ -2,7 +2,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100vh;
   background: none;
   --pad: 1rem;
   --pad05: calc(.5 * var(--pad));
@@ -13,10 +12,9 @@ body {
   background: none;
   display: flex;
   flex-direction: column;
-  width: auto;
-  min-width: 400px; /* showing almost everything in one line in English and CJK */
-  max-width: 800px;
-  max-height: calc(100vh - 32px);
+  max-width: 850px;
+  max-height: var(--100dvh);
+  box-sizing: border-box;
   border: 1px solid var(--c60);
   box-shadow: 0px 5px 15px 3px hsla(0, 0%, 0%, .35);
 }