feat: show project image on small screen

research-software-directory · Nov 7, 2022 · bc8400b · bc8400b
1 parent 982e40a
commit bc8400b
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/frontend/components/projects/ProjectCard.tsx b/frontend/components/projects/ProjectCard.tsx
@@ -4,7 +4,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import Link from 'next/link'
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
 import {getTimeAgoSince} from '../../utils/dateFn'
 import ImageAsBackground from '../layout/ImageAsBackground'
@@ -58,10 +57,10 @@ export default function ProjectCard(
   return (
     <Link href={projectUrl()} passHref>
       <a className={`flex flex-col h-full bg-base-200 text-content ${opacity} hover:bg-secondary hover:text-white`}>
-        <article className="flex flex-1 h-full px-4 overflow-hidden">
+        <article className="flex flex-1 h-full px-4 gap-4 overflow-hidden">
           <section
             title={subtitle ?? title}
-            className="py-4 h-full md:w-[13rem]"
+            className="flex-[2] py-4 h-full"
             >
             <ImageAsBackground
               alt={title}
@@ -72,14 +71,14 @@ export default function ProjectCard(
               noImgMsg='no image'
             />
           </section>
-          <section className="flex flex-col flex-1 py-4 md:pl-6">
+          <section className="flex-[3] flex flex-col py-4">
             <h2
               title={title}
               className={`max-h-[6rem] overflow-clip ${titleMargin}`}>
               {renderIcon()} {title}
             </h2>
 
-            <p className="flex-1 py-4 overflow-auto">
+            <p className="flex-1 my-4 overflow-auto">
               {subtitle}
             </p>
             <div className="flex justify-between text-sm">