Seekra/frontend
3
3
Fork 0
generated from Seekra/repository-template
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix(settings): prevent input setting done button from extending beyond viewport border

Browse Source
This commit is contained in:
jakob.scheid
2026-07-28 20:08:36 +02:00
committed by jakob.scheid
parent 942645df68
commit 31fbfbde07
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/settings/components/SettingsInput.vue
+22 -16
View File
@@ -93,13 +93,16 @@ const apply = function apply () {
} }
.input-container { .input-container {
position: relative;
width: 50%; width: 50%;
white-space: nowrap; white-space: nowrap;
--total-animation-duration: 0.3s; --total-animation-duration: 0.3s;
} }
.input { .input {
width: calc(100% - 2 * var(--input-padding)); box-sizing: border-box;
width: 100%;
height: calc(var(--input-height) + 2 * var(--input-padding-y));
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
--input-height: 24px; --input-height: 24px;
@@ -111,15 +114,18 @@ const apply = function apply () {
} }
.input-container.done-button-shown .input { .input-container.done-button-shown .input {
width: calc(100% - 3.5 * var(--input-padding) - 26px - 0.75 * var(--input-height) + 1.5px); width: calc(100% - 1.5 * var(--input-padding) - 26px - 0.75 * var(--input-height) + 1.5px);
} }
.done-button { .done-button {
position: absolute;
right: 0;
top: 50%;
border: 1px solid var(--border); border: 1px solid var(--border);
min-height: var(--input-height); min-height: var(--input-height);
padding: var(--input-padding); padding: var(--input-padding);
margin-left: calc(0.5 * var(--input-padding) + 0.25 * var(--input-height) + 0.5px); transform: translateY(-50%) scale(0);
transform: scale(0); transform-origin: center;
vertical-align: middle; vertical-align: middle;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -132,45 +138,45 @@ const apply = function apply () {
.input-container.done-button-shown .done-button { .input-container.done-button-shown .done-button {
animation: done-button-appear var(--total-animation-duration); animation: done-button-appear var(--total-animation-duration);
display: inline-flex; display: inline-flex;
transform: scale(1); transform: translateY(-50%) scale(1);
} }
@keyframes done-button-appear { @keyframes done-button-appear {
0% { 0% {
transform: scale(0); transform: translateY(-50%) scale(0);
} }
10% { 10% {
transform: scale(0); transform: translateY(-50%) scale(0);
} }
95% { 95% {
transform: scale(1.05); transform: translateY(-50%) scale(1.05);
} }
100% { 100% {
transform: scale(1); transform: translateY(-50%) scale(1);
} }
} }
@keyframes done-button-disappear { @keyframes done-button-disappear {
0% { 0% {
transform: scale(1); transform: translateY(-50%) scale(1);
} }
100% { 100% {
transform: scale(0); transform: translateY(-50%) scale(0);
} }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@keyframes done-button-appear { @keyframes done-button-appear {
0% { 0% {
transform: scale(1); transform: translateY(-50%) scale(1);
opacity: 0; opacity: 0;
} }
10% { 10% {
transform: scale(1); transform: translateY(-50%) scale(1);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: translateY(-50%) scale(1);
opacity: 1; opacity: 1;
} }
} }
@@ -178,11 +184,11 @@ const apply = function apply () {
@keyframes done-button-disappear { @keyframes done-button-disappear {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(1); transform: translateY(-50%) scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: scale(1); transform: translateY(-50%) scale(1);
} }
} }
} }