From 6828ff0c47ad7883df31fe782718ff763eec1c35 Mon Sep 17 00:00:00 2001
From: Andrew Huang <ahuang@anaconda.com>
Date: Mon, 1 Apr 2024 15:07:12 -0700
Subject: [PATCH 1/3] Change panel icon

---
 panel/models/card.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/panel/models/card.ts b/panel/models/card.ts
index 809d8d77ef..429884a704 100644
--- a/panel/models/card.ts
+++ b/panel/models/card.ts
@@ -5,6 +5,14 @@ import type * as p from "@bokehjs/core/properties"
 
 import card_css from "styles/models/card.css"
 
+const CHEVRON_RIGHT = `
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h12v12H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
+`;
+
+const CHEVRON_DOWN = `
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h12v12H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>
+`;
+
 export class CardView extends ColumnView {
   declare model: Card
 
@@ -73,7 +81,7 @@ export class CardView extends ColumnView {
     if (this.model.collapsible) {
       this.button_el = DOM.createElement("button", {type: "button", class: header_css_classes})
       const icon = DOM.createElement("div", {class: button_css_classes})
-      icon.innerHTML = this.model.collapsed ? "\u25ba" : "\u25bc"
+      icon.innerHTML = this.model.collapsed ? CHEVRON_RIGHT : CHEVRON_DOWN
       this.button_el.appendChild(icon)
       this.button_el.style.backgroundColor = header_background != null ? header_background : ""
       header.el.style.backgroundColor = header_background != null ? header_background : ""
@@ -136,7 +144,7 @@ export class CardView extends ColumnView {
     } else {
       this.collapsed_style.clear()
     }
-    this.button_el.children[0].innerHTML = this.model.collapsed ? "\u25ba" : "\u25bc"
+    this.button_el.children[0].innerHTML = this.model.collapsed ? CHEVRON_RIGHT : CHEVRON_DOWN
     this.invalidate_layout()
   }
 

From 6b40582d3d9abd513060beec3d6e63041f9431d6 Mon Sep 17 00:00:00 2001
From: Andrew Huang <ahuang@anaconda.com>
Date: Mon, 1 Apr 2024 15:13:57 -0700
Subject: [PATCH 2/3] Remove semicolon

---
 panel/models/card.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/models/card.ts b/panel/models/card.ts
index 429884a704..887351a492 100644
--- a/panel/models/card.ts
+++ b/panel/models/card.ts
@@ -7,11 +7,11 @@ import card_css from "styles/models/card.css"
 
 const CHEVRON_RIGHT = `
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h12v12H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
-`;
+`
 
 const CHEVRON_DOWN = `
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h12v12H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>
-`;
+`
 
 export class CardView extends ColumnView {
   declare model: Card

From c9be2bcadd7b6a8003f6d3ca905605ef97264f2f Mon Sep 17 00:00:00 2001
From: Andrew Huang <ahuang@anaconda.com>
Date: Mon, 1 Apr 2024 15:11:01 -0700
Subject: [PATCH 3/3] Fix card header margins

---
 panel/styles/models/card.less | 9 +++------
 panel/theme/css/bootstrap.css | 8 --------
 panel/theme/css/material.css  | 4 ----
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/panel/styles/models/card.less b/panel/styles/models/card.less
index 32167b0562..a3b5a47bfa 100644
--- a/panel/styles/models/card.less
+++ b/panel/styles/models/card.less
@@ -22,10 +22,10 @@
   border-radius: 0.25rem;
   display: inline-flex;
   justify-content: start;
-  left: 0;
   outline: unset;
   position: sticky;
   width: 100%;
+  padding-inline: 0.5em;
 }
 
 .accordion-header {
@@ -37,20 +37,17 @@
   display: flex;
   justify-content: start;
   position: sticky;
-  left: 0;
   width: 100%;
 }
 
 .card-button {
   background-color: transparent;
-  margin-left: 0.5em;
-  margin-right: 0.5em;
+  margin-left: 0em;
+  margin-right: 0.25em;
 }
 
 .card-header-row {
-  margin-left: auto 1em;
   position: relative !important;
-  max-width: calc(100% - 2em);
 }
 
 .card-title {
diff --git a/panel/theme/css/bootstrap.css b/panel/theme/css/bootstrap.css
index 4b94389d22..1630fd3dda 100644
--- a/panel/theme/css/bootstrap.css
+++ b/panel/theme/css/bootstrap.css
@@ -149,14 +149,6 @@ button.accordion-header {
   border-radius: 0;
 }
 
-:host(.card-header-row) .card-title {
-  margin: 0;
-}
-
-.card-header > .card-header-row {
-  margin-left: 15px;
-}
-
 :host(.card-title) h1,
 :host(.card-title) h2,
 :host(.card-title) h3,
diff --git a/panel/theme/css/material.css b/panel/theme/css/material.css
index 9c6e7eafcd..42d79fd9b3 100644
--- a/panel/theme/css/material.css
+++ b/panel/theme/css/material.css
@@ -55,10 +55,6 @@
   padding: 0px 6px;
 }
 
-.card-header > .card-header-row {
-  margin-left: 15px;
-}
-
 button.mdc-button.mdc-card-button {
   color: transparent;
   height: 50px;