make card view responsive in layout (#8276)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/metadata/views/card/card-items/card-item/index.css

@@ -1,5 +1,6 @@
 .sf-metadata-card-item {
-  width: 300px;
+  min-width: 0;
+  height: fit-content;
   background: #f9f9f9;
   border: 1px solid var(--bs-border-secondary-color);
   border-radius: 6px;
@@ -8,6 +9,7 @@
   flex-direction: column;
   overflow: hidden;
   user-select: none;
+  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
 }
 
 .sf-metadata-card-item.selected {
@@ -19,7 +21,26 @@
 }
 
 .sf-metadata-card-item-image-container {
-  height: 200px;
+  position: relative;
+  width: 100%;
+  background: #fafafa;
+  overflow: hidden;
+  min-height: 150px;
+}
+
+/* Use pseudo-element to establish aspect ratio (3:2) so height is always reserved */
+.sf-metadata-card-item-image-container::before {
+  content: '';
+  display: block;
+  padding-top: 66.6667%;
+}
+
+.sf-metadata-card-item-image-container .sf-metadata-card-item-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .sf-metadata-card-item-text-container {
@@ -93,6 +114,8 @@
 
 .sf-metadata-card-item .file-name-formatter .sf-metadata-file-icon {
   transform: translateY(-1px);
+  max-width: 100%;
+  height: auto;
 }
 
 .sf-metadata-card-item .sf-metadata-card-item-field .collaborators-formatter {

frontend/src/metadata/views/card/card-items/card-item/index.js

@@ -80,8 +80,8 @@ const CardItem = ({
       onClick={handleClickCard}
       onContextMenu={onContextMenu}
     >
-      <div className="sf-metadata-card-item-image-container d-flex justify-content-center align-items-center">
+      <div className="sf-metadata-card-item-image-container">
-        <img className="mw-100 mh-100" ref={imgRef} src={imageURLs.URL} onError={onLoadError} alt="" />
+        <img loading="lazy" className="sf-metadata-card-item-image" ref={imgRef} src={imageURLs.URL} onError={onLoadError} alt="" />
       </div>
       <div className="sf-metadata-card-item-text-container">
         <Formatter value={fileNameValue} column={fileNameColumn} record={record} showThumbnail={false} onFileNameClick={handleFilenameClick} tagsData={tagsData} />

frontend/src/metadata/views/card/card-items/index.css

@@ -1,4 +1,21 @@
 .sf-metadata-view-card-items-container {
+  height: auto;
+  --sf-card-min-width: 240px;
+  --sf-card-max-width: 1fr;
+  --sf-card-gap: 20px;
   padding: 20px;
-  grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--sf-card-min-width), var(--sf-card-max-width)));
+  gap: var(--sf-card-gap);
+  align-content: start;
+}
+
+@media (max-width: 1200px) {
+  .sf-metadata-view-card-items-container { --sf-card-min-width: 210px; }
+}
+@media (max-width: 900px) {
+  .sf-metadata-view-card-items-container { --sf-card-min-width: 190px; }
+}
+@media (max-width: 600px) {
+  .sf-metadata-view-card-items-container { --sf-card-min-width: 160px; padding: 12px; --sf-card-gap: 12px; }
 }

frontend/src/metadata/views/card/card-items/index.js

@@ -143,7 +143,7 @@ const CardItems = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSetti
     <>
       <div
         ref={containerRef}
-        className={classnames('sf-metadata-view-card-items-container d-flex flex-wrap h-100 o-auto', {
+        className={classnames('sf-metadata-view-card-items-container', {
           'sf-metadata-view-card-items-container-text-wrap': textWrap
         })}
         onClick={handleClickOutside}

frontend/src/metadata/views/card/index.js

@@ -41,7 +41,7 @@ const Card = () => {
 
   return (
     <div className="sf-metadata-container">
-      <div className="sf-metadata-view-card flex-fill o-hidden position-relative">
+      <div className="sf-metadata-view-card flex-fill o-auto position-relative">
         <CardItems
           modifyRecord={modifyRecord}
           deleteRecords={deleteRecords}