Revert to standard Materialize grid for better card density

- Switched from CSS Grid to standard Materialize column grid
- Fixed card width issues so cards properly fill available space
- Ensured cards maintain consistent heights within rows
- Added proper margins for better spacing between card rows
- Set consistent card image heights for better visual alignment
- Used flexbox approach that works better with Materialize CSS

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: drusepth

app/views/browse/tag.html.erb

@@ -113,7 +113,7 @@
 
           <div class="row js-content-cards-list">
             <% content_group[:content].each do |content| %>
-              <div class="col s12 m6 l4 xl3 js-content-card-container">
+              <div class="col s12 m6 l4 xl3 js-content-card-container" style="margin-bottom: 20px;">
                 <div class="hoverable card sticky-action z-depth-1" style="margin-bottom: 20px; border-radius: 8px; overflow: hidden;">
                   <!-- Color indicator bar at top of card -->
                   <div style="height: 4px; background-color: <%= content_group[:color] == 'grey' ? '#9e9e9e' : "var(--#{content_group[:color]})" %>;"></div>
@@ -377,37 +377,35 @@
     display: block;
   }
 
-  /* Card height consistency using CSS Grid */
-  @media only screen and (min-width: 601px) {
-    .js-content-cards-list {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      grid-gap: 20px;
-    }
-    
-    .js-content-card-container {
-      margin-bottom: 0;
-    }
-    
-    .js-content-card-container .card {
-      height: 100%;
-      margin-bottom: 0;
-      display: grid;
-      grid-template-rows: auto 1fr auto;
-    }
-    
-    .card .card-image {
-      grid-row: 1;
-    }
-    
-    .card .card-content {
-      grid-row: 2;
-    }
-    
-    .card .card-action {
-      grid-row: 3;
-      align-self: end;
-    }
+  /* Proper card sizing and grid density - reverting to standard Material grid with fixed heights */
+  .js-content-card-container .card {
+    height: 100%;
+    width: 100%;
+    margin-bottom: 0;
+  }
+  
+  /* Make all cards in a row the same height */
+  .js-content-cards-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+  
+  /* Make sure card containers take their full column width */
+  .js-content-card-container {
+    display: flex;
+  }
+  
+  /* Ensure card images maintain aspect ratio */
+  .card .card-image .activator {
+    height: 200px;
+    width: 100%;
+  }
+  
+  /* Ensure card content expands properly */
+  .card .card-content {
+    flex-grow: 1;
   }
 
   @media only screen and (max-width: 600px) {