diff options
| author | tamaina <tamaina@hotmail.co.jp> | 2023-04-10 17:11:44 +0000 |
|---|---|---|
| committer | tamaina <tamaina@hotmail.co.jp> | 2023-04-10 17:21:28 +0000 |
| commit | 83bcdb8edeacc67a63576e1451601320e31c678c (patch) | |
| tree | 06c2ab446f94978f19d99f0b275a5c506ccc661f | |
| parent | fix(client): :art: fix MkEmojiPicker safe-area-inset-bottom (diff) | |
| download | misskey-83bcdb8edeacc67a63576e1451601320e31c678c.tar.gz misskey-83bcdb8edeacc67a63576e1451601320e31c678c.tar.bz2 misskey-83bcdb8edeacc67a63576e1451601320e31c678c.zip | |
fix(client): Consider safe-area-inset-bottom on global widgets area
Fix #9052
| -rw-r--r-- | packages/frontend/src/ui/classic.vue | 3 | ||||
| -rw-r--r-- | packages/frontend/src/ui/universal.vue | 4 | ||||
| -rw-r--r-- | packages/frontend/src/ui/universal.widgets.vue | 6 |
3 files changed, 9 insertions, 4 deletions
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue index 4838272a9e..792c1ccc5e 100644 --- a/packages/frontend/src/ui/classic.vue +++ b/packages/frontend/src/ui/classic.vue @@ -250,6 +250,7 @@ onMounted(() => { > .widgets { //--panelBorder: none; width: 300px; + padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px)); @media (max-width: $widgets-hide-threshold) { display: none; @@ -304,7 +305,7 @@ onMounted(() => { right: 0; z-index: 1001; height: 100dvh; - padding: var(--margin); + padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; overflow: auto; background: var(--bg); diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index ab3d01532b..2462967515 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -296,7 +296,7 @@ $widgets-hide-threshold: 1090px; } .widgets { - padding: 0 var(--margin); + padding: 0 var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)); border-left: solid 0.5px var(--divider); background: var(--bg); @@ -329,7 +329,7 @@ $widgets-hide-threshold: 1090px; right: 0; z-index: 1001; height: 100dvh; - padding: var(--margin) !important; + padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue index 2e557d30ce..d11649c603 100644 --- a/packages/frontend/src/ui/universal.widgets.vue +++ b/packages/frontend/src/ui/universal.widgets.vue @@ -3,7 +3,7 @@ <XWidgets :class="$style.widgets" :edit="editMode" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/> <button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button> - <button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button> + <button v-else class="_textButton mk-widget-edit" :class="$style.edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button> </div> </template> @@ -91,4 +91,8 @@ function updateWidgets(thisWidgets) { .widgets { width: 300px; } + +.edit { + width: 100%; +} </style> |