From 23615c7309dacb9bce6a8913b474bb344d31cced Mon Sep 17 00:00:00 2001
From: hackerESQ <corey@coreyvarma.com>
Date: Fri, 18 Oct 2024 19:42:53 -0500
Subject: [PATCH] chart stylying

---
 resources/views/components/ib-apex-chart.blade.php     |  2 +-
 .../livewire/portfolio-performance-chart.blade.php     | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/ib-apex-chart.blade.php b/resources/views/components/ib-apex-chart.blade.php
index b3b7ea3..9e8ed0a 100644
--- a/resources/views/components/ib-apex-chart.blade.php
+++ b/resources/views/components/ib-apex-chart.blade.php
@@ -131,7 +131,7 @@
 
                     var seriesColor = chartContext.w.config.colors[i];
                     var legendItem = document.createElement('div');
-                    legendItem.classList.add('flex', 'items-center', 'm-2', 'cursor-pointer');
+                    legendItem.classList.add('flex', 'items-center', 'my-2', 'mr-4', 'cursor-pointer');
                     legendItem.setAttribute('data-series-index', i);
 
                     var colorBox = document.createElement('span');
diff --git a/resources/views/livewire/portfolio-performance-chart.blade.php b/resources/views/livewire/portfolio-performance-chart.blade.php
index 8d41165..b688189 100644
--- a/resources/views/livewire/portfolio-performance-chart.blade.php
+++ b/resources/views/livewire/portfolio-performance-chart.blade.php
@@ -105,13 +105,13 @@ new class extends Component {
 }; ?>
 
 <x-card class="bg-slate-100 dark:bg-base-200 rounded-lg mb-6">
-    <div class="flex justify-between items-center mb-2">
+    <div class="flex flex-col md:flex-row md:justify-between mb-2">
                     
-        <div class="flex items-center">
+        <div class="flex flex-col md:flex-row items-start md:items-center">
             
-            <h2 class="text-xl mr-4">{{ __('Performance') }}</h2>
+            <h2 class="text-xl mb-2 md:mb-0 md:mr-4">{{ __('Performance') }}</h2>
 
-            <div id="chart-legend-{{ $name }}" class="hidden md:flex space-between"></div>
+            <div id="chart-legend-{{ $name }}" class="flex space-between whitespace-nowrap mb-2 md:mb-0"></div>
             
         </div>
         
@@ -120,7 +120,7 @@ new class extends Component {
 
             <x-loading x-show="loading" x-cloak class="text-gray-400 ml-2" />
 
-            <x-dropdown title="{{ __('Choose time period') }}" label="{{ $scope }}" class="btn-ghost btn-sm" x-bind:disabled="loading">
+            <x-dropdown title="{{ __('Choose time period') }}" label="{{ $scope }}" class="btn-xs md:btn-sm btn-outline" x-bind:disabled="loading">
                     
                 @foreach($scopeOptions as $option)