From 809f796f5656b48540f4d29e8a70a92b8c794cbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 25 May 2026 06:38:19 +0300
Subject: [PATCH] style: implement uniform layout clamping and flexbox sizing
 for blog post cards

---
 resources/views/blog/index.blade.php          | 21 ++++++++++++
 resources/views/blog/partials/posts.blade.php | 32 ++++++++++---------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/resources/views/blog/index.blade.php b/resources/views/blog/index.blade.php
index bca2efd..cd5744d 100644
--- a/resources/views/blog/index.blade.php
+++ b/resources/views/blog/index.blade.php
@@ -219,6 +219,27 @@
 
 @push('styles')
 <style>
+/* Ensure uniform layout and clamping for title and excerpt */
+.post-title-clamp {
+    display: -webkit-box !important;
+    -webkit-line-clamp: 3 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    min-height: 3.9em !important;
+    line-height: 1.3em !important;
+}
+
+.post-excerpt {
+    display: -webkit-box !important;
+    -webkit-line-clamp: 3 !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    min-height: 4.5em !important;
+    line-height: 1.5em !important;
+}
+
 /* Premium Centered & Large Blog Search Box */
 .blog-search-box {
     background: #ffffff !important;
diff --git a/resources/views/blog/partials/posts.blade.php b/resources/views/blog/partials/posts.blade.php
index 7e92e1b..a4a6460 100644
--- a/resources/views/blog/partials/posts.blade.php
+++ b/resources/views/blog/partials/posts.blade.php
@@ -26,7 +26,7 @@
       @endphp
 
       <div class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
-        <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+        <div class="card h-full flex flex-col !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
           @if($post->featured_image || $post->featured_image_url)
             <figure class="card-img-top overlay overlay-1 group">
               <a href="{{ $blogUrl }}">
@@ -38,20 +38,22 @@
             </figure>
           @endif
           
-          <div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px]">
-            <div class="post-header !mb-[.9rem]">
-              @if($categoryName)
-                <div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
-                  <a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
-                </div>
-              @endif
-              <h2 class="post-title h3 !mt-1 !mb-3">
-                <a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
-              </h2>
-            </div>
-            
-            <div class="!relative">
-              <p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 120) }}</p>
+          <div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px] flex flex-col justify-between">
+            <div>
+              <div class="post-header !mb-[.9rem]">
+                @if($categoryName)
+                  <div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
+                    <a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" style="color: {{ $catColor }} !important;" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
+                  </div>
+                @endif
+                <h2 class="post-title h3 post-title-clamp !mt-1 !mb-3">
+                  <a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
+                </h2>
+              </div>
+              
+              <div class="!relative">
+                <p class="post-excerpt !mb-0">{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 160) }}</p>
+              </div>
             </div>
           </div>