From 8c4c58e094600a3e5e340ce8ebfa18a072f02b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 26 May 2026 23:33:35 +0300
Subject: [PATCH] refactor: update finance dashboard market cards to use
 flexbox layout for responsive wrapping

---
 .../views/front/products/finance.blade.php     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/views/front/products/finance.blade.php b/resources/views/front/products/finance.blade.php
index 7aa1e1a..a8362de 100644
--- a/resources/views/front/products/finance.blade.php
+++ b/resources/views/front/products/finance.blade.php
@@ -50,11 +50,11 @@
                             <span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span>
                             <span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span>
                         </div>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <div style="display: flex; flex-wrap: wrap; gap: 16px;">
                             
                             {{-- USD Card --}}
-                            <div>
-                                <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
+                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
+                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                     <div class="flex items-center justify-between !mb-2">
                                         <span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span>
                                         <div class="flex items-center gap-1" id="usd-change-container" style="color: #009846;">
@@ -74,8 +74,8 @@
                             </div>
 
                             {{-- EUR Card --}}
-                            <div>
-                                <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
+                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
+                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                     <div class="flex items-center justify-between !mb-2">
                                         <span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span>
                                         <div class="flex items-center gap-1" id="eur-change-container" style="color: #B9101E;">
@@ -95,8 +95,8 @@
                             </div>
 
                             {{-- GBP Card --}}
-                            <div>
-                                <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
+                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
+                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                     <div class="flex items-center justify-between !mb-2">
                                         <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span>
                                         <div class="flex items-center gap-1" id="gbp-change-container" style="color: #B9101E;">
@@ -116,8 +116,8 @@
                             </div>
 
                             {{-- GRA Card --}}
-                            <div>
-                                <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
+                            <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
+                                <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
                                     <div class="flex items-center justify-between !mb-2">
                                         <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span>
                                         <div class="flex items-center gap-1" id="gra-change-container" style="color: #B9101E;">