style for onboarding

static/styles.css

@@ -18,6 +18,7 @@
   --insufficient-alert-bg: #fff0f0;
   --insufficient-alert-border: #f78989;
   --insufficient-alert-text: #b92020;
+  --text-md: 17px; /* Adjusted from 17px to make everything slightly smaller */
 }
 
 /* Dark Mode */
@@ -47,7 +48,7 @@
 /* Global Styles */
 body, .gradio-container {
   background-color: var(--background-main);
-  font-size: 15px;
+  font-size: 16px; /* Adjusted base font size */
   overflow-x: hidden !important;
   color: var(--text-dark);
 }
@@ -65,10 +66,23 @@ body, .gradio-container {
   padding-bottom: 0 !important;
 }
 
-.gradio-markdown p {
+/* Increase markdown text size */
+.gradio-markdown p, 
+.gradio-markdown li,
+.gradio-markdown ul,
+.gradio-markdown ol {
+  font-size: var(--text-md) !important; /* Use the variable for markdown text */
+  line-height: 1.5 !important;
   margin-bottom: 0.5em !important;
 }
 
+/* Special styles for intro instruction text */
+.gradio-markdown p:has(em):has(strong) {
+  font-size: 1.3em !important; /* Slightly reduced from 1.4em */
+  line-height: 1.5 !important;
+  margin-bottom: 8px !important;
+}
+
 .gradio-row {
   overflow: visible !important;
 }
@@ -86,10 +100,10 @@ body, .gradio-container {
 }
 
 .tab-nav button {
-  font-size: 1.1em !important;
+  font-size: 1.15em !important; /* Reduced from 1.2em */
   font-weight: 600 !important;
   padding: 10px 25px !important;
-  margin: 0 5px !important;
+  margin: 0 6px !important;
   border-radius: 6px 6px 0 0 !important;
   border: none !important;
   background-color: transparent !important;
@@ -114,7 +128,7 @@ body, .gradio-container {
 
 /* Common Typography */
 h1 {
-  font-size: 1.6em !important;
+  font-size: 1.7em !important; /* Reduced from 1.8em */
   color: var(--primary) !important;
   margin: 10px 0 5px 0 !important;
   padding: 0 !important;
@@ -122,7 +136,7 @@ h1 {
 
 h3, 
 .section-heading {
-  font-size: 1.2em !important;
+  font-size: 1.25em !important; /* Reduced from 1.3em */
   font-weight: 600 !important;
   margin: 5px 0 2px 0 !important;
   padding: 0 !important;
@@ -153,7 +167,7 @@ hr {
   display: flex !important;
   align-items: center !important;
   overflow: visible !important;
-  min-height: 40px !important;
+  min-height: 45px !important; /* Reduced from 48px */
   white-space: normal !important;
 }
 
@@ -172,13 +186,13 @@ hr {
 #query-container {
   display: flex !important;
   align-items: stretch !important;
-  gap: 10px !important;
+  gap: 10px !important; /* Reduced from 12px */
   overflow: visible !important;
 }
 
 .query-box-row {
   background-color: var(--query-background) !important;
-  padding: 12px 15px !important;
+  padding: 12px 16px !important; /* Reduced from 14px 18px */
   border-radius: 6px !important;
   border: 1px solid var(--query-border) !important;
   margin: 0 !important;
@@ -187,7 +201,7 @@ hr {
   max-width: 70% !important;
   overflow: visible !important;
   display: flex !important;
-  min-height: 50px !important;
+  min-height: 55px !important; /* Reduced from 60px */
   height: auto !important;
 }
 
@@ -199,10 +213,15 @@ hr {
   overflow: visible !important;
   width: 100% !important;
   display: block !important;
+  text-align: left !important; /* Default left alignment for regular questions */
+}
+
+.empty-query {
+  text-align: center !important; /* Center alignment only for the initial question */
 }
 
 .query-text p {
-  font-size: 1.2em !important;
+  font-size: 1.25em !important; /* Reduced from 1.3em */
   font-weight: 600 !important;
   color: var(--query-text) !important;
   line-height: 1.4 !important;
@@ -227,28 +246,28 @@ hr {
   border-radius: 6px !important;
   font-weight: 500 !important;
   transition: all 0.2s ease !important;
+  font-size: 1.05em !important; /* Reduced from 1.1em */
 }
 
 .query-button {
-  padding: 0 20px !important;
+  padding: 0 20px !important; /* Reduced from 0 24px */
   flex: 0 0 auto !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  font-size: 0.95em !important;
-  min-height: 50px !important;
+  min-height: 55px !important; /* Reduced from 60px */
   white-space: nowrap !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
 .context-toggle-button {
-  padding: 5px 10px !important;
-  font-size: 0.85em !important;
-  height: 30px !important;
+  padding: 5px 10px !important; /* Reduced from 6px 12px */
+  font-size: 0.95em !important; /* Reduced from 1.0em */
+  height: 32px !important; /* Reduced from 36px */
   line-height: 1 !important;
   width: auto !important;
   min-width: 0 !important;
-  max-width: 150px !important;
+  max-width: 160px !important; /* Reduced from 180px */
   margin: 0 !important;
   cursor: pointer !important;
 }
@@ -265,23 +284,23 @@ hr {
 #try-another-btn {
   background-color: var(--primary) !important;
   color: white !important;
-  padding: 12px 30px !important;
+  padding: 12px 30px !important; /* Reduced from 14px 36px */
   border-radius: 6px !important;
   font-weight: 600 !important;
-  font-size: 1.2em !important;
+  font-size: 1.2em !important; /* Reduced from 1.25em */
   transition: all 0.2s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
   border: none !important;
 }
 
 #submit-button {
-  margin-top: 15px !important;
+  margin-top: 15px !important; /* Reduced from 18px */
 }
 
 #try-another-btn {
   width: 100% !important;
   max-width: 100% !important;
-  margin: 10px auto !important;
+  margin: 10px auto !important; /* Reduced from 12px */
   display: block !important;
 }
 
@@ -292,10 +311,10 @@ hr {
 }
 
 .control-buttons button {
-  margin: 0 10px !important;
-  font-size: 1em !important;
+  margin: 0 10px !important; /* Reduced from 0 12px */
+  font-size: 1.05em !important; /* Reduced from 1.1em */
   border-radius: 6px !important;
-  padding: 8px 16px !important;
+  padding: 8px 16px !important; /* Reduced from 10px 19px */
   transition: all 0.2s ease !important;
 }
 
@@ -304,7 +323,7 @@ hr {
   background-color: transparent !important;
   font-style: normal !important;
   color: var(--text-medium) !important;
-  font-size: 1.05em !important;
+  font-size: 1.05em !important; /* Reduced from 1.1em */
 }
 
 .context-topic {
@@ -319,7 +338,7 @@ hr {
 .topic-label {
   font-weight: 600 !important;
   color: var(--text-medium) !important;
-  margin-right: 6px !important;
+  margin-right: 6px !important; /* Reduced from 7px */
 }
 
 #context-header-row {
@@ -331,7 +350,7 @@ hr {
 .context-title {
   margin: 0 !important;
   padding: 0 !important;
-  font-size: 1.2em !important;
+  font-size: 1.25em !important; /* Reduced from 1.3em */
   font-weight: 600 !important;
   color: var(--text-dark) !important;
 }
@@ -344,10 +363,10 @@ hr {
 .context-item {
   border: 1px solid var(--border-light);
   background-color: var(--background-light);
-  padding: 12px;
+  padding: 12px; /* Reduced from 14px */
   border-radius: 6px;
-  margin-bottom: 8px;
-  font-size: 1em;
+  margin-bottom: 8px; /* Reduced from 10px */
+  font-size: 1.05em; /* Reduced from 1.1em */
   line-height: 1.5;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
@@ -359,8 +378,8 @@ hr {
 .chunk-header {
   font-weight: 600;
   color: var(--query-text);
-  margin-bottom: 8px;
-  padding-bottom: 5px;
+  margin-bottom: 8px; /* Reduced from 10px */
+  padding-bottom: 5px; /* Reduced from 6px */
   border-bottom: 1px solid var(--query-border);
 }
 
@@ -377,29 +396,29 @@ hr {
   border: 2px solid var(--insufficient-alert-border);
   background-color: var(--insufficient-alert-bg);
   color: var(--insufficient-alert-text);
-  padding: 12px;
+  padding: 12px; /* Reduced from 14px */
   border-radius: 6px;
-  margin-bottom: 12px;
-  font-size: 1em;
+  margin-bottom: 12px; /* Reduced from 14px */
+  font-size: 1.05em; /* Reduced from 1.1em */
 }
 
 .insufficient-alert strong {
   display: inline-flex !important;
   align-items: center !important;
-  margin-bottom: 5px;
-  font-size: 1.1em !important;
+  margin-bottom: 5px; /* Reduced from 6px */
+  font-size: 1.15em !important; /* Reduced from 1.2em */
   font-weight: 600 !important;
 }
 
 .insufficient-alert strong svg {
-  margin-right: 8px !important;
-  width: 1em !important;
-  height: 1em !important;
+  margin-right: 8px !important; /* Reduced from 10px */
+  width: 1.1em !important; /* Reduced from 1.2em */
+  height: 1.1em !important; /* Reduced from 1.2em */
 }
 
 .insufficient-alert p {
   margin: 0;
-  font-size: 1em;
+  font-size: 1.05em; /* Reduced from 1.1em */
 }
 
 /* Summary Cards */
@@ -409,7 +428,7 @@ hr {
 }
 
 #summary-containers {
-  margin-top: 10px !important;
+  margin-top: 10px !important; /* Reduced from 12px */
 }
 
 #main-interface-area > div:nth-child(7) > div {
@@ -425,8 +444,8 @@ hr {
 }
 
 #main-interface-area > p:first-of-type {
-  font-size: 1em !important;
-  margin: 0 0 8px 0 !important;
+  font-size: var(--text-md) !important;
+  margin: 0 0 8px 0 !important; /* Reduced from 0 0 10px 0 */
   padding: 0 !important;
   line-height: 1.4 !important;
   color: var(--text-medium) !important;
@@ -438,11 +457,11 @@ hr {
   background-color: var(--background-light) !important;
   box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
   margin: 0 !important;
-  padding: 12px !important;
+  padding: 12px !important; /* Reduced from 14px */
   display: flex !important;
   flex-direction: column !important;
   height: auto !important;
-  min-height: 200px !important;
+  min-height: 200px !important; /* Reduced from 220px */
   overflow: visible !important;
 }
 
@@ -465,18 +484,18 @@ hr {
 
 .summary-card .gr-input-label,
 .feedback-section .gr-input-label {
-  font-size: 1.1em !important;
+  font-size: 1.15em !important; /* Reduced from 1.2em */
   font-weight: 600 !important;
   color: var(--text-dark) !important;
 }
 
 .summary-card .gr-input-label {
-  margin: 0 0 5px 0 !important;
+  margin: 0 0 5px 0 !important; /* Reduced from 0 0 6px 0 */
   padding: 0 !important;
 }
 
 .feedback-section .gr-input-label {
-  margin-bottom: 0.6em !important;
+  margin-bottom: 0.6em !important; /* Reduced from 0.72em */
 }
 
 .summary-card .gr-textbox {
@@ -491,10 +510,10 @@ hr {
   background-color: transparent !important;
   border: none !important;
   color: var(--text-dark) !important;
-  font-size: 1.1em !important;
+  font-size: 1.15em !important; /* Reduced from 1.2em */
   line-height: 1.4 !important;
   height: auto !important;
-  min-height: 150px !important;
+  min-height: 160px !important; /* Reduced from 180px */
   padding: 0 !important;
   margin: 0 !important;
   width: 100% !important;
@@ -505,14 +524,14 @@ hr {
 /* Voting Section */
 .vote-button {
   flex-grow: 1;
-  margin: 0 5px 5px 5px !important;
-  font-size: 1.05em !important;
-  padding: 12px 15px !important;
+  margin: 0 5px 5px 5px !important; /* Reduced from 0 6px 6px 6px */
+  font-size: 1.1em !important; /* Reduced from 1.15em */
+  padding: 12px 16px !important; /* Reduced from 14px 18px */
   border-radius: 6px !important;
   transition: all 0.2s ease !important;
   background-color: var(--background-light) !important;
   border: 1px solid var(--border-light) !important;
-  min-height: 50px !important;
+  min-height: 55px !important; /* Reduced from 60px */
   font-weight: 500 !important;
   color: var(--text-dark) !important;
 }
@@ -551,27 +570,27 @@ hr {
 
 /* Feedback Section */
 .feedback-section {
-  padding: 3px 0 !important;
+  padding: 3px 0 !important; /* Reduced from 4px 0 */
   background-color: transparent !important;
-  margin: 3px 0 !important;
-  font-size: 1em;
+  margin: 3px 0 !important; /* Reduced from 4px 0 */
+  font-size: 1.05em; /* Reduced from 1.1em */
   border: none !important;
   box-shadow: none !important;
 }
 
 .feedback-section .gr-check-radio {
-  font-size: 1.05em !important;
+  font-size: 1.1em !important; /* Reduced from 1.15em */
 }
 
 .feedback-section .gr-check-radio span { 
-  font-size: 1.05em !important;
+  font-size: 1.1em !important; /* Reduced from 1.15em */
   color: var(--text-dark) !important;
 }
 
 .feedback-section input[type="checkbox"] {
-  width: 18px !important;
-  height: 18px !important;
-  margin-right: 6px !important;
+  width: 18px !important; /* Reduced from 20px */
+  height: 18px !important; /* Reduced from 20px */
+  margin-right: 6px !important; /* Reduced from 7px */
 }
 
 .feedback-section input[type="checkbox"]:checked {
@@ -582,7 +601,7 @@ hr {
 
 /* Model Reveal */
 .model-reveal {
-  font-size: 1.1em !important;
+  font-size: 1.15em !important; /* Reduced from 1.2em */
   text-align: center !important;
   font-weight: 600 !important;
   background-color: transparent !important;
@@ -591,13 +610,13 @@ hr {
 }
 
 .model-reveal span {
-  font-size: 1.3em !important; 
+  font-size: 1.3em !important; /* Reduced from 1.4em */
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100% !important;
-  padding: 25px 15px !important; 
-  min-height: 50px !important; 
+  padding: 25px 16px !important; /* Reduced from 30px 18px */
+  min-height: 55px !important; /* Reduced from 60px */
 }
 
 .model-a-reveal span {
@@ -610,7 +629,7 @@ hr {
 
 /* DataFrames and Tables */
 .gr-dataframe table {
-  font-size: 0.95em !important;
+  font-size: 1.05em !important; 
   border-collapse: separate !important;
   border-spacing: 0 !important;
   overflow: hidden !important;
@@ -618,7 +637,7 @@ hr {
 
 .gr-dataframe th, 
 .gr-dataframe td {
-  padding: 8px 10px !important;
+  padding: 8px 10px !important; 
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
 }
@@ -642,7 +661,7 @@ hr {
   border-spacing: 0 !important;
   border: none !important;
   width: 100% !important;
-  margin: 16px 0 !important;
+  margin: 16px 0 !important; /* Reduced from 19px 0 */
   overflow: hidden !important;
 }
 
@@ -665,7 +684,7 @@ hr {
 
 .external-icon {
   display: inline-block !important;
-  margin-left: 5px !important;
+  margin-left: 5px !important; /* Reduced from 6px */
   opacity: 0.6 !important;
   transition: opacity 0.2s !important;
 }
@@ -674,8 +693,9 @@ hr {
   opacity: 1 !important;
 }
 
+/* Special styling for the Elo ratings info box */
 #leaderboard-info {
-  margin: 15px 0 !important;
+  margin: 16px 0 !important; /* Reduced from 18px 0 */
   padding: 0 !important;
   background-color: rgba(255, 236, 224, 0.5) !important;
   border: none !important;
@@ -683,39 +703,42 @@ hr {
 
 #leaderboard-info > div {
   margin: 0 !important;
-  padding: 15px !important;
+  padding: 12px 16px !important; /* REDUCED from 18px - less padding top/bottom for grey box */
   background-color: var(--background-light) !important;
   border: none !important;
 }
 
 #leaderboard-info h3 {
   margin-top: 0 !important;
-  margin-bottom: 10px !important;
+  margin-bottom: 10px !important; /* Reduced from 12px */
   color: var(--primary) !important;
+  font-size: 1.3em !important; /* Reduced from 1.35em */
 }
 
 #leaderboard-info p {
-  margin-bottom: 8px !important;
+  margin-bottom: 8px !important; /* Reduced from 10px */
   line-height: 1.5 !important;
+  font-size: var(--text-md) !important;
 }
 
 #leaderboard-info ul {
-  margin-bottom: 10px;
-  padding-left: 20px;
+  margin-bottom: 10px; /* Reduced from 12px */
+  padding-left: 20px; /* Reduced from 24px */
 }
 
 #leaderboard-info li {
-  margin-bottom: 4px;
+  margin-bottom: 4px; /* Reduced from 5px */
   line-height: 1.4;
+  font-size: var(--text-md) !important;
 }
 
-/* Leaderboard Table Specific Styles - With FIX for HF Spaces */
+/* Leaderboard Table Specific Styles - Adjusted size */
 .leaderboard-table {
   width: 100% !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
-  font-size: 1.05em !important;
-  margin-top: 15px !important;
+  font-size: 1.05em !important; /* Reduced from 1.1em */
+  margin-top: 16px !important; /* Reduced from 18px */
   overflow: hidden !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
   border-radius: 8px !important;
@@ -735,8 +758,9 @@ hr {
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
   text-align: left !important;
-  padding: 12px 15px !important;
+  padding: 10px 12px !important; /* Reduced from 12px 14px */
   background-color: var(--background-main) !important;
+  font-size: var(--text-md) !important;
 }
 
 /* Header row styling */
@@ -744,8 +768,8 @@ hr {
   background-color: #FFF1E6 !important;
   color: var(--text-dark) !important;
   font-weight: 600 !important;
-  font-size: 1.1em !important;
-  padding: 15px !important;
+  font-size: 1.05em !important; /* Reduced from 1.1em */
+  padding: 12px !important; /* Reduced from 14px */
   border: none !important;
   border-bottom: 1px solid var(--border-light) !important;
 }
@@ -788,18 +812,18 @@ hr {
 /* Blockquote styling */
 .gradio-container .prose blockquote,
 .gradio-container-5-28-0 .prose blockquote {
-  margin: 3px 0 !important;
-  border-left: 12px solid var(--border-color-primary) !important;
-  padding-left: var(--size-2) !important;
+  margin: 3px 0 !important; /* Reduced from 4px 0 */
+  border-left: 12px solid var(--border-color-primary) !important; /* Reduced from 14px */
+  padding-left: calc(var(--size-2) * 1.1) !important; /* Reduced */
   font-style: normal !important;
   color: var(--text-dark) !important;
 }
 
 /* Spacing for Markdown content */
 span.svelte-7ddecg p {
-  line-height: 1.8 !important;
+  line-height: 1.7 !important; /* Reduced from 1.8 */
   margin-top: 0 !important;
-  margin-bottom: 0.5em !important;
+  margin-bottom: 0.5em !important; /* Reduced from 0.6em */
 }
 
 .html-container.svelte-phx28p.padding {
@@ -813,7 +837,116 @@ html {
 
 /* For the query section scroll margin */
 #query-section {
-  scroll-margin-top: 20px;
+  scroll-margin-top: 20px; /* Reduced from 24px */
+}
+
+/* FAQ Section Styles - Improved left alignment */
+#faq-toggle-row {
+  width: 100% !important;
+  margin-top: 8px !important; /* Reduced from 10px */
+  margin-bottom: 8px !important; /* Reduced from 10px */
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  text-align: left !important;
+  display: flex !important;
+  justify-content: flex-start !important;
+  align-items: center !important;
+}
+
+.faq-toggle-button {
+  color: var(--primary) !important;
+  background-color: transparent !important;
+  border: none !important;
+  padding: 6px 0 !important; /* Reduced from 8px 0 */
+  font-size: 1.1em !important; /* Reduced from 1.15em */
+  font-weight: 500 !important;
+  text-align: left !important;
+  justify-content: flex-start !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  width: auto !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+/* Hover effect for FAQ toggle - just underline */
+.faq-toggle-button:hover {
+  text-decoration: underline !important;
+  color: var(--primary) !important;
+}
+
+#faq-content {
+  background-color: var(--background-light) !important;
+  border-radius: 6px !important;
+  padding: 10px 16px !important; /* REDUCED from 16px 20px - less padding for the FAQ content box */
+  margin-top: 5px !important; /* Reduced from 6px */
+  margin-bottom: 15px !important; /* Reduced from 18px */
+  border: 1px solid var(--border-light) !important;
+  width: 70% !important;
+}
+
+.faq-text {
+  color: var(--text-medium) !important;
+  font-size: 1.05em !important; /* Reduced from 1.1em */
+}
+
+.faq-text p {
+  margin-bottom: 12px !important; /* Reduced from 14px */
+  line-height: 1.5 !important; /* Reduced from 1.6 */
+  color: var(--text-medium) !important;
+  font-size: var(--text-md) !important;
+}
+
+.faq-text ul {
+  margin-top: 8px !important; /* Reduced from 10px */
+  margin-bottom: 10px !important; /* Reduced from 12px */
+  padding-left: 25px !important; /* Reduced from 30px */
+  list-style-type: circle !important;
+}
+
+.faq-text li {
+  margin-bottom: 8px !important; /* Reduced from 10px */
+  color: var(--text-medium) !important;
+  font-size: var(--text-md) !important;
+  line-height: 1.5 !important;
+}
+
+/* Empty State and Initial State Styles */
+.empty-state-message {
+  color: var(--text-medium) !important;
+  font-style: italic !important;
+  text-align: center !important;
+  padding: 20px !important; /* Reduced from 24px */
+  font-size: 1.15em !important; /* Reduced from 1.2em */
+}
+
+/* Get a Question Button - initially more prominent */
+.initial-button {
+  background-color: var(--primary) !important;
+  color: white !important;
+  font-weight: 600 !important;
+  padding: 10px 20px !important; /* Reduced from 12px 24px */
+  border-radius: 6px !important;
+  transition: all 0.2s ease !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+  font-size: 1.25em !important; /* Reduced from 1.3em */
+}
+
+.initial-button:hover {
+  background-color: #E56E0F !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* When content is loaded, section visibility */
+.content-loaded .context-section,
+.content-loaded .model-comparison-section,
+.content-loaded .voting-section {
+  display: block !important;
 }
 
 /* Responsive Styles */
@@ -825,7 +958,7 @@ html {
   .query-box-row {
     flex: 1 1 100% !important;
     max-width: 100% !important;
-    margin-bottom: 10px !important;
+    margin-bottom: 10px !important; /* Reduced from 12px */
   }
   
   .query-button {
@@ -833,12 +966,12 @@ html {
   }
 
   .vote-button {
-    font-size: 0.9em !important;
-    padding: 10px 8px !important;
+    font-size: 1.05em !important; /* Reduced from 1.08em */
+    padding: 10px 8px !important; /* Reduced from 12px 10px */
   }
 
   .summary-card {
-    margin-bottom: 15px !important;
+    margin-bottom: 15px !important; /* Reduced from 18px */
   }
 
   #main-interface-area > div:nth-child(7) > div {
@@ -850,11 +983,11 @@ html {
   #main-interface-area > div:nth-child(10) > div {
     display: grid !important;
     grid-template-columns: 1fr 1fr !important;
-    gap: 8px !important;
+    gap: 8px !important; /* Reduced from 10px */
   }
 
   .vote-button {
     margin: 0 !important;
-    padding: 8px 5px !important;
+    padding: 8px 5px !important; /* Reduced from 10px 6px */
   }
 }