styling

Author: hannahblair

src/routes/+page.svelte

@@ -233,7 +233,7 @@
         <div class="flex flex-col space-y-2">
           <button 
             on:click={() => setActiveView('canvas')}
-            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'canvas' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'}"
+            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'canvas' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'} !mb-3"
           >
             <div class="flex items-center justify-center mr-3">
               <span class="text-base">🎯</span>
@@ -242,7 +242,7 @@
           </button>
           <button 
             on:click={() => setActiveView('docs')}
-            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'docs' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'}"
+            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'docs' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'} !mb-3"
           >
             <div class="flex items-center justify-center mr-3">
               <span class="text-base">📖</span>
@@ -251,7 +251,7 @@
           </button>
           <button 
             on:click={() => setActiveView('events')}
-            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'events' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'}"
+            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'events' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'} !mb-3"
           >
             <div class="flex items-center justify-center mr-3">
               <span class="text-base">🔍</span>
@@ -260,7 +260,7 @@
           </button>
           <button 
             on:click={() => setActiveView('source')}
-            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'source' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'}"
+            class="flex items-center py-3 px-4 text-sm font-medium transition-all duration-200 rounded-lg {activeView === 'source' ? 'text-[#2e3438] bg-[#e3f2fd] border border-[#F87701]' : 'text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc]'} !mb-3"
           >
             <div class="flex items-center justify-center mr-3">
               <span class="text-base">💻</span>
@@ -283,7 +283,7 @@
             <div class="rounded-xl border-2 transition-all duration-200 mb-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
+                  <div class="h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
                     <span class="text-sm {selectedDataset === 'basic' ? 'text-white' : 'text-[#64748b]'}">📋</span>
                   </div>
                   <div class="text-left">
@@ -305,7 +305,7 @@
             <div class="rounded-xl border-2 transition-all duration-200 shadow-md' : 'border-[#e2e8f0] bg-white hover:border-[#cbd5e1] hover:shadow-sm'} mb-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
+                  <div class="h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
                     <span class="text-sm {selectedDataset === 'large' ? 'text-white' : 'text-[#64748b]'}">📈</span>
                   </div>
                   <div class="text-left">
@@ -327,7 +327,7 @@
             <div class="rounded-xl border-2 transition-all duration-200 mb-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
+                  <div class="h-8 rounded-lg flex items-center justify-center mr-3 transition-colors duration-200">
                     <span class="text-sm {selectedDataset === 'mixed' ? 'text-white' : 'text-[#64748b]'}">🎨</span>
                   </div>
                   <div class="text-left">