chore(ui): refactor filter modals across pages for mobile support

Author: steveninhle

ui/dashboard/src/@locales/ja/common.json

@@ -385,7 +385,10 @@
           "all": "<b>all:</b> すべての評価結果を返し、SDK キャッシュ全体を更新します。"
         }
       }
-  }
-},
-  "load-more": "もっと読み込む"
+    }
+  },
+  "detail": "詳細",
+  "last-seen": "最終アクセス日時",
+  "time-stop": "終了日時",
+  "time-start": "開始日時"
 }

ui/dashboard/src/app/index.tsx

@@ -166,7 +166,7 @@ export const Root = memo(() => {
     return (
       <div className="flex flex-col sm:flex-row w-full h-full">
         <div className="flex fixed z-20 top-0 left-0 gap-3 items-center justify-between sm:hidden w-full h-[50px] px-4 bg-primary-400">
-          <img src={logo} alt="Bucketer" />
+          <img src={logo} alt="Bucketeer" />
           {!showMenu && (
             <Button
               className="bg-transparent hover:bg-transparent p-0"

ui/dashboard/src/components/date-range-picker/customize-date-range-picker.css

@@ -156,7 +156,7 @@
 }
 
 .rdrMonthsVertical{
-  @apply max-h-[600px] overflow-y-scroll
+  @apply max-h-[600px] overflow-y-scroll;
 }
 
 .rdrCalendarWrapper {

ui/dashboard/src/components/date-time-picker/custom-datepicker.css

@@ -79,7 +79,7 @@
   @apply text-gray-500;
 }
 .react-datepicker__view-calendar-icon input{
-  @apply w-full
+  @apply w-full;
 }
 
 @media (max-width: 599px) {

ui/dashboard/src/components/dropdown/content.tsx

@@ -4,9 +4,7 @@ import { cn } from 'utils/style';
 
 export type DropdownMenuContentProps = ComponentPropsWithoutRef<
   typeof DropdownMenuPrimitive.Content
-> & {
-  isExpand?: boolean;
-};
+>;
 
 export const DropdownMenuContent = forwardRef<
   HTMLDivElement,

ui/dashboard/src/components/dropdown/trigger.tsx

@@ -16,7 +16,7 @@ import Spinner from 'components/spinner';
 
 const triggerVariants = cva(
   [
-    'flex items-center px-3 py-[11px] gap-x-3 w-fit border rounded-lg bg-white max-[600px]:py-2 max-[600px]:text-sm',
+    'flex items-center px-3 py-[11px] gap-x-3 w-fit border rounded-lg bg-white max-sm:py-2 max-sm:text-sm',
     'disabled:cursor-not-allowed disabled:border-gray-400 disabled:bg-gray-100 disabled:!shadow-none'
   ],
   {

ui/dashboard/src/components/input/index.tsx

@@ -29,7 +29,7 @@ const inputVariants = cva(
       },
       size: {
         sm: 'px-4 py-2',
-        md: 'px-4 py-[11px] max-[600px]:py-2 max-[600px]:text-sm',
+        md: 'px-4 py-[11px] max-sm:py-2 max-sm:text-sm',
         lg: 'px-4 py-4'
       },
       addonSlot: {

ui/dashboard/src/components/mobile-card/api-card/index.tsx

@@ -1,5 +1,8 @@
 import { useCallback } from 'react';
-import { IconEditOutlined } from 'react-icons-material-design';
+import {
+  IconEditOutlined,
+  IconMoreVertOutlined
+} from 'react-icons-material-design';
 import { useAuthAccess } from 'auth';
 import { useToast } from 'hooks';
 import { useTranslation } from 'i18n';
@@ -144,6 +147,7 @@ export const ApiCard: React.FC<ApiCardProps> = ({ data, onActions }) => {
       >
         <Card.Action>
           <DisabledPopoverTooltip
+            icon={IconMoreVertOutlined}
             isNeedAdminAccess
             options={compact([
               {

ui/dashboard/src/components/mobile-card/env-card/index.tsx

@@ -1,6 +1,7 @@
 import {
   IconArchiveOutlined,
-  IconEditOutlined
+  IconEditOutlined,
+  IconMoreVertOutlined
 } from 'react-icons-material-design';
 import { getCurrentEnvironment, useAuth } from 'auth';
 import { useTranslation } from 'i18n';
@@ -55,6 +56,7 @@ export const EnvironmentCard: React.FC<EnvCardProps> = ({
       >
         <Card.Action>
           <DisabledPopoverTooltip
+            icon={IconMoreVertOutlined}
             isNeedAdminAccess
             content={
               isDisabled ? t('table:disabled-archive-current-env') : undefined

ui/dashboard/src/components/modal/dialog.tsx

@@ -33,11 +33,13 @@ const DialogModal = ({
   className,
   overlayCls
 }: ModalProps) => {
+  // Outside interactions are already blocked via onPointerDownOutside /
+  // onInteractOutside, so any close reaching here (Escape, Dialog.Close) is allowed
   const onOpenChange = useCallback(
     (v: boolean) => {
-      if (v === false && closeOnClickOutside) onClose();
+      if (v === false) onClose();
     },
-    [closeOnClickOutside]
+    [onClose]
   );
 
   return (