fix: enlarge the dict list to two columns on medium screens

thewing12 · Feb 9, 2021 · 74028b6 · 74028b6
1 parent 6dd332a
commit 74028b6
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/pages/Gallery/DictionaryGroup.tsx b/src/pages/Gallery/DictionaryGroup.tsx
@@ -6,7 +6,7 @@ const DictionaryGroup: React.FC<DictionaryGroupProps> = ({ title, dictionaries }
   return (
     <section>
       <h3 className="mb-2 text-sm font-bold text-gray-600">{title}</h3>
-      <main className="flex flex-col space-y-4">
+      <main className="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
         {dictionaries.map((dict) => (
           <DictionaryCard key={dict.id} dictionary={dict} />
         ))}

diff --git a/src/pages/Gallery/index.tsx b/src/pages/Gallery/index.tsx
@@ -24,7 +24,7 @@ const GalleryPage: React.FC = () => {
           返回练习
         </NavLink>
       </Header>
-      <div className="mt-auto mb-auto flex max-w-screen-lg space-x-4 overflow-y-auto">
+      <div className="mt-auto mb-auto flex w-auto space-x-4 overflow-y-auto">
         <div className="bg-indigo-50 rounded-lg p-6 space-y-2 overflow-y-auto">
           <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 text-shadow z-10">词典选择</h2>
           {groups.map(([name, items]) => (