fix(web): fix checkin safe inset area padding

Author: dvcol

src/components/AppComponent.vue

@@ -169,6 +169,8 @@ onBeforeUnmount(() => {
     justify-content: center;
     min-height: layout.$main-content-height;
     margin-top: layout.$safe-navbar-height;
+    padding-right: calc(#{layout.$safe-area-inset-right} / 1.5);
+    padding-left: calc(#{layout.$safe-area-inset-left} / 1.5);
 
     &.full-height {
       min-height: var(--full-height);

src/components/common/buttons/FloatingButton.vue

@@ -55,6 +55,7 @@ const emit = defineEmits<{
 
 <style lang="scss" scoped>
 @use '~/styles/mixin' as mixin;
+@use '~/styles/layout' as layout;
 @use '~/styles/transition' as transition;
 @include transition.scale($scale: 0.6);
 
@@ -68,7 +69,7 @@ const emit = defineEmits<{
   padding: 0.5rem;
 
   &.watching {
-    bottom: 2.5rem;
+    bottom: calc(2.5rem + #{layout.$safe-area-inset-bottom / 1.5});
   }
 
   .text {

src/components/views/checkin/CheckinComponent.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { formatTime } from '@dvcol/common-utils/common/format';
 import { NButton, NIcon, NTooltip } from 'naive-ui';
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 
 import IconCancel from '~/components/icons/IconCancel.vue';
 import IconMovie from '~/components/icons/IconMovie.vue';
@@ -19,7 +19,7 @@ import {
 } from '~/utils/watching.utils';
 import { watchMedia } from '~/utils/window.utils';
 
-defineProps({
+const props = defineProps({
   parentElement: {
     type: HTMLElement,
     required: false,
@@ -33,6 +33,24 @@ const { cancel } = useWatchingStore();
 
 const isTiny = watchMedia('(max-width: 600px)');
 
+const offset = computed(() => {
+  if (!props.parentElement) return;
+  return (
+    Number.parseInt(
+      getComputedStyle(props.parentElement).getPropertyValue('--safe-area-inset-bottom'),
+      10,
+    ) ||
+    Number.parseInt(
+      getComputedStyle(props.parentElement).getPropertyValue('--safe-area-inset-left'),
+      10,
+    ) ||
+    Number.parseInt(
+      getComputedStyle(props.parentElement).getPropertyValue('--safe-area-inset-right'),
+      10,
+    )
+  );
+});
+
 const icon = computed(() => (watching.value?.type === 'movie' ? IconMovie : IconScreen));
 const title = computed(() => {
   if (!watching.value) return '';
@@ -128,7 +146,7 @@ const onClick = () => {
 
 <template>
   <div class="wrapper">
-    <div class="container" :class="{ watching: isWatching }" @click="onClick">
+    <div class="container" :class="{ watching: isWatching, offset }" @click="onClick">
       <span class="left">
         <NIcon class="icon" :component="icon" />
         <div class="column">
@@ -302,12 +320,21 @@ const onClick = () => {
     }
 
     &.watching {
-      height: calc(1.75rem + #{layout.$safe-area-inset-bottom});
+      height: calc(1.75rem + #{layout.$safe-area-inset-bottom / 1.5});
+
+      &.offset {
+        padding: 0
+          max(
+            calc(#{layout.$safe-area-inset-left} / 2),
+            calc(#{layout.$safe-area-inset-right} / 2),
+            calc(#{layout.$safe-area-inset-bottom} / 1.5)
+          );
+      }
 
       &:active,
       &:focus-within,
       &:hover {
-        height: calc(3rem + #{layout.$safe-area-inset-bottom});
+        height: calc(3rem + #{layout.$safe-area-inset-bottom} / 2);
         color: var(--white);
 
         .icon {

src/styles/base.scss

@@ -190,29 +190,6 @@
     --bg-color-hover: var(--bg-black-60);
   }
 
-  /*
-  @media (prefers-color-scheme: light) {
-    !* semantic color variables for this project *!
-    --color-background: var(--white);
-    --color-background-soft: var(--white-soft);
-    --color-background-mute: var(--white-mute);
-    --color-border: var(--vt-c-divider-light-2);
-    --color-border-hover: var(--vt-c-divider-light-1);
-    --color-heading: var(--vt-c-text-light-1);
-    --color-text: var(--vt-c-text-light-1);
-
-    !* ui color variables *!
-    --bg-color-20:  var(--bg-red-20);
-    --bg-color-30: var(--bg-red-30);
-    --bg-color-60: var(--bg-red-60);
-    --bg-color-70: var(--bg-red-70);
-    --bg-color-80: var(--bg-red-80);
-    --bg-color-90: var(--bg-red-90);
-    --bg-color: var(--bg-color-80);
-    --bg-color-hover: var(--bg-red-90);
-  }
-  */
-
   @media (display-mode: standalone) {
     /* height */
     --full-height: 100vh;