* fix violation of stylelint rule no-duplicate-selectors @ <PostNav>

* replace all usages of css unit `vh/w` with `dvh/w`
@ fe

Author: n0099

fe/src/assets/css/global.css

@@ -20,7 +20,7 @@ address {
 }
 
 @media (max-width: 991.98px) {
-    .container { /* let all .container be like .container-fluid when vw is less than md breakpoint */
+    .container { /* let all .container be like .container-fluid when 100dvw is less than the md breakpoint */
         max-width: 100% !important;
     }
 }

fe/src/components/post/Nav.vue

@@ -196,15 +196,13 @@ watch(viewportTopmostPost, async (to, from) => {
         z-index: 1040;
     }
     .post-nav[aria-expanded=true] {
-        /* linear regression of vw,inline-size: 456,456 768,384(50%) https://www.wolframalpha.com/input?i=y%3D-0.2308x%2B561.2 */
-        inline-size: calc(-0.2308 * 100vw + 561.2px - v-bind(scrollBarWidth));
+        /* linear regression of {dvw,inline-size}: {{456,456},{768,384(50%)}} https://www.wolframalpha.com/input?i=linear+regression+%7B%7B456%2C456%7D%2C%7B768%2C384%7D%7D */
+        inline-size: calc(-0.2308 * 100dvw + 561.2px - v-bind(scrollBarWidth));
     }
     .post-nav[aria-expanded=true] + .post-nav-expand {
         /* merge .post-nav-expand into the scrollbar of .post-nav */
-        inset-inline-start: min(-0.2308 * 100vw + 561.2px - v-bind(scrollBarWidth) * 2, 100vw - v-bind(scrollBarWidth) * 2);
-    }
-    .post-nav[aria-expanded=true] + .post-nav-expand {
-        /* after merge narrow the block-size from 100vh to fit-content for interactive with the scrollbar */
+        inset-inline-start: min(-0.2308 * 100dvw + 561.2px - v-bind(scrollBarWidth) * 2, 100dvw - v-bind(scrollBarWidth) * 2);
+        /* after merge narrow the block-size from 100dvh to fit-content for interactive with the scrollbar */
         block-size: auto !important;
         /* https://stackoverflow.com/questions/28455100/how-to-center-div-vertically-inside-of-absolutely-positioned-parent-div/28456704#28456704 */
         inset-block-start: 50%;

fe/src/components/post/renderer/Table.vue

@@ -176,16 +176,16 @@ const subReplyColumns = ref<ColumnType[]>([
 }
 
 :deep(.renderer-table-reply .ant-table table) {
-    min-inline-size: calc(100vw - v-bind(scrollBarWidth) - 48px);
+    min-inline-size: calc(100dvw - v-bind(scrollBarWidth) - 48px);
 }
 :deep(.renderer-table-reply .ant-table tbody > tr > td) {
-    max-inline-size: calc(100vw - v-bind(scrollBarWidth) - 48px);
+    max-inline-size: calc(100dvw - v-bind(scrollBarWidth) - 48px);
 }
 :deep(.renderer-table-sub-reply .ant-table table) {
-    min-inline-size: calc(100vw - v-bind(scrollBarWidth) - 48px - 48px);
+    min-inline-size: calc(100dvw - v-bind(scrollBarWidth) - 48px - 48px);
 }
 :deep(.renderer-table-sub-reply .ant-table tbody > tr > td) {
-    max-inline-size: calc(100vw - v-bind(scrollBarWidth) - 48px - 48px);
+    max-inline-size: calc(100dvw - v-bind(scrollBarWidth) - 48px - 48px);
 }
 
 :deep(.renderer-table-reply thead > tr > th) {

fe/src/layouts/default.vue

@@ -55,7 +55,7 @@ if (import.meta.client) {
 
 <style scoped>
 #app-wrapper {
-    min-height: 100vh;
+    min-height: 100dvh;
     pointer-events: v-bind(appPointerEvents);
 }