Skip to content

Commit

Permalink
fix violentmonkey#2088: use largest possible viewport (violentmonkey#…
Browse files Browse the repository at this point in the history
  • Loading branch information
gera2ld authored May 4, 2024
1 parent 24e7fa8 commit 8c7be64
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 14 deletions.
8 changes: 0 additions & 8 deletions src/options/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -181,12 +181,4 @@ textarea:not([rows="1"]):not(.h100) {
white-space: normal;
}
}

.edit-open {
// hide other components when edit is open to avoid scroll glitches in Firefox Android
.page-options {
height: 0;
overflow: hidden;
}
}
}
12 changes: 7 additions & 5 deletions src/options/views/edit/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,6 @@ function setupSavePosition({ id: curWndId, tabs }) {
}
&-body {
padding: .5rem 1rem;
// overflow: auto;
background: var(--bg);
flex: 1;
}
Expand Down Expand Up @@ -516,10 +515,13 @@ function setupSavePosition({ id: curWndId, tabs }) {
}
}
.touch .edit {
// fixed/absolute doesn't work well with scroll in Firefox Android
position: static;
// larger than 100vh to force overflow so that the toolbar can be hidden in Firefox Android
.touch body {
position: relative;
/*
* Set height to 1px larger than screen height to force overflow so that the toolbar can be hidden in Firefox Android.
* Use `100vh` (largest possible viewport) to avoid flashing caused by URL bar resizing.
* See https://developer.chrome.com/blog/url-bar-resizing
*/
min-height: calc(100vh + 1px);
}
Expand Down
4 changes: 3 additions & 1 deletion src/options/views/tab-installed.vue
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
</Dropdown>
<!-- form and id are required for the built-in autocomplete using entered values -->
<form class="filter-search hidden-xs" @submit.prevent
:style="{ 'max-width': 5 + Math.max(20, state.search.value.length) + 'ex' }">
:style="{ 'min-width': '10em', 'max-width': 5 + Math.max(20, state.search.value.length) + 'ex' }">
<label>
<input
type="search"
Expand Down Expand Up @@ -804,6 +804,8 @@ $iconSize: 2rem; // from .icon in ui/style.css
align-items: center;
line-height: 1;
border-bottom: 1px solid var(--fill-5);
overflow-x: auto;
overflow-y: hidden;
.btn-ghost, select {
height: $iconSize;
}
Expand Down

0 comments on commit 8c7be64

Please sign in to comment.