fix:responsiveness-issue-of-ratelimit-page

unkeyed · Dec 6, 2024 · 0823c8d · 0823c8d
1 parent 9bd8be6
commit 0823c8d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx
@@ -152,7 +152,7 @@ export default async function RatelimitNamespacePage(props: {
 
       <div className="flex items-center justify-between w-full">
         <div>
-          <h2 className="text-2xl font-semibold leading-none tracking-tight whitespace-nowrap">
+          <h2 className="text-2xl font-semibold leading-none tracking-tight whitespace-nowrap hidden sm:block">
             Requests
           </h2>
         </div>
@@ -213,7 +213,7 @@ export default async function RatelimitNamespacePage(props: {
           <EmptyPlaceholder.Description>
             Ratelimit something or change the range
           </EmptyPlaceholder.Description>
-          <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
+          <Code className="flex items-start  gap-0 sm:gap-8 p-4 my-8  text-xs  sm:text-xxs text-start overflow-x-auto max-w-full">
             {snippet}
             <CopyButton value={snippet} />
           </Code>

diff --git a/apps/dashboard/components/dashboard/empty-placeholder.tsx b/apps/dashboard/components/dashboard/empty-placeholder.tsx
@@ -15,7 +15,7 @@ export function EmptyPlaceholder({
       )}
       {...props}
     >
-      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
+      <div className="overflow-hidden w-full max-w-full flex flex-col items-center justify-center text-center">
         {children}
       </div>
     </div>

diff --git a/apps/dashboard/components/ui/code.tsx b/apps/dashboard/components/ui/code.tsx
@@ -4,7 +4,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const codeVariants = cva(
-  "inlineflex font-mono items-center rounded-md border border-border bg-transparent px-2.5 py-2 text-sm   transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inlineflex font-mono items-center rounded-md border border-border bg-transparent text-sm   transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {