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

Author: steveninhle

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

@@ -222,6 +222,7 @@
   "see-more": "See more",
   "default": "Default",
   "sort-by": "Sort by: {{sortBy}}",
+  "sort-by-placeholder": "Sort by",
   "sort-asc": "Ascending",
   "sort-desc": "Descending",
   "no-options-found": "No options found",

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

@@ -222,6 +222,7 @@
   "see-more": "もっと見る",
   "default": "デフォルト",
   "sort-by": "並び替え: {{sortBy}}",
+  "sort-by-placeholder": "並び替え",
   "sort-asc": "昇順",
   "sort-desc": "降順",
   "no-options-found": "オプションが見つかりません",
@@ -385,7 +386,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) {
@@ -115,10 +115,10 @@
     @apply w-full;
   }
   .react-datepicker__time-list {
-    @apply !h-[56px] flex overflow-x-auto overflow-y-hidden;
+    @apply !h-auto flex flex-wrap gap-2 overflow-visible p-3;
   }
   .react-datepicker__time-list-item {
-    @apply shrink-0 px-3;
+    @apply !h-auto shrink-0 rounded-md border border-gray-200 px-3 py-2;
   }
   .react-datepicker__time-box {
     @apply !w-full;

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