fix expand properly

cmss13-devs · May 10, 2024 · d437cd5 · d437cd5
1 parent c64859f
commit d437cd5
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/src/components/dialog.tsx b/src/components/dialog.tsx
@@ -21,7 +21,7 @@ export const Dialog: React.FC<DialogPropsType> = (props: DialogPropsType) => {
       <dialog
         {...rest}
         open={open}
-        className={`w-full md:w-11/12 py-10 border border-themed foreground z-20 px-10 max-h-full overflow-auto ${
+        className={`w-full md:w-11/12 py-10 border border-themed foreground z-20 px-10 overflow-auto md:max-h-none md:overflow-visible ${
           className ?? ""
         } md:min-w-[600px]`}
         style={{

diff --git a/src/components/expand.tsx b/src/components/expand.tsx
@@ -14,7 +14,7 @@ export const Expand: React.FC<ExpandProps> = (props: ExpandProps) => {
     <>
       <Link onClick={() => setOpen(true)}>{props.label}</Link>
       {open && (
-        <Dialog open={open} toggle={() => setOpen(false)}>
+        <Dialog open={open} toggle={() => setOpen(false)} className="expand">
           <div className="pt-10">{props.value}</div>
         </Dialog>
       )}

diff --git a/src/components/tripletsList.tsx b/src/components/tripletsList.tsx
@@ -12,7 +12,7 @@ export const TripletList: React.FC<TripletListProps> = (
   props: TripletListProps
 ) => {
   return (
-    <div className="flex flex-col border-white border p-5 m-3 gap-1 max-h-[400px] overflow-auto">
+    <div className="flex flex-col border-white border p-5 m-3 gap-1 max-h-[400px] md:max-h-[700px] overflow-auto">
       <table>
         {props.triplets.map((triplet) => (
           <tr key={triplet.id}>

diff --git a/src/index.css b/src/index.css
@@ -103,3 +103,7 @@ input {
   bottom: -6px;
 }
 
+.expand {
+  max-height: 700px !important;
+  overflow: auto !important;
+}