Various CSS and sizing adjustments

panel/io/resources.py

@@ -187,6 +187,8 @@ def patch_stylesheet(stylesheet, dist_url):
     url = stylesheet.url
     if not url.startswith('http') and not url.startswith(dist_url):
         patched_url = f'{dist_url}{url}'
+    elif url.startswith(CDN_DIST+dist_url) and dist_url != CDN_DIST:
+        patched_url = url.replace(CDN_DIST+dist_url, dist_url)
     elif url.startswith(CDN_DIST) and dist_url != CDN_DIST:
         patched_url = url.replace(CDN_DIST, dist_url)
     else:

panel/layout/flex.py

@@ -49,6 +49,11 @@ class FlexBox(ListLike, ReactiveHTML):
         'nowrap', 'wrap', 'wrap-reverse'], doc="""
         Whether and how to wrap items in the flex container.""")
 
+    margin = param.Parameter(default=0, doc="""
+        Allows to create additional space around the component. May
+        be specified as a two-tuple of the form (vertical, horizontal)
+        or a four-tuple (top, right, bottom, left).""")
+
     justify_content = param.Selector(default='flex-start', objects=[
         'flex-start', 'flex-end', 'center', 'space-between', 'space-around',
         'space-evenly', 'start', 'end', 'left', 'right'], doc="""

panel/layout/flexbox.html

@@ -1,6 +1,6 @@
 <div id="flexbox" style="display: flex; flex-wrap: ${flex_wrap}; justify-content: ${justify_content}; flex-direction: ${flex_direction}; align-content: ${align_content}; align-items: ${align_items}; height: 100%;">
   {% for obj in objects %}
-  <div id="flex-item-{{ loop.index0 }}">
+  <div id="flex-item-{{ loop.index0 }}" style="display: contents;">
     ${objects[{{ loop.index0 }}]}
   </div>
   {% endfor %}

panel/models/card.ts

@@ -39,6 +39,8 @@ export class CardView extends ColumnView {
     this._apply_classes(this.model.classes)
     this._apply_visible()
 
+    this.class_list.add(...this.css_classes())
+
     const {button_css_classes, header_color, header_tag, header_css_classes} = this.model
 
     const header_background = this.header_background
@@ -67,14 +69,21 @@ export class CardView extends ColumnView {
       header_el.style.color = header_color != null ? header_color : ""
       this.shadow_el.appendChild(header_el)
       header.render()
+      header.after_render()
     }
     for (const child_view of this.child_views.slice(1)) {
       if (!this.model.collapsed)
         this.shadow_el.appendChild(child_view.el)
       child_view.render()
+      child_view.after_render()
     }
   }
 
+  async update_children(): Promise<void> {
+    this.render()
+    this.invalidate_layout()
+  }
+
   _toggle_button(): void {
     this.model.collapsed = !this.model.collapsed
   }

panel/models/reactive_html.ts

@@ -240,7 +240,7 @@ export class ReactiveHTMLView extends HTMLBoxView {
     this._apply_classes(this.model.classes)
     this._apply_visible()
 
-    this.container = div()
+    this.container = div({style: "display: contents;"})
     this.shadow_el.append(this.container)
     this._update()
     this._render_children()

panel/template/bootstrap/bootstrap.css

@@ -34,6 +34,10 @@ html {
     background-color: var(--bs-surface-bg);
 }
 
+::-webkit-scrollbar-corner {
+    background-color: var(--bs-surface-bg);
+}
+
 body {
     color: var(--bs-body-color);
     background-color: var(--bs-body-bg);

panel/template/fast/fast.css

@@ -201,6 +201,8 @@ img.app-logo {
 
 .nav.flex-column {
     padding-inline-start: 0px;
+    margin-block-start: 0;
+    margin-block-end: 0;
 }
 
 .pn-modal-close {

panel/template/material/material.css

@@ -121,8 +121,10 @@ img.app-logo {
 }
 
 .main-content {
+    height: calc(100vh - 70px);
     overflow-y: scroll;
     overflow-x: auto;
+    padding: 5px 25px 0px 15px;
 }
 
 #header {
@@ -132,7 +134,7 @@ img.app-logo {
 
 #header-items {
     width: 100%;
-    margin-left: 15px;
+    margin-left: 25px;
 }
 
 .pn-busy-container {
@@ -145,16 +147,6 @@ img.app-logo {
     overflow-x: hidden;
 }
 
-.mdc-drawer__content, .main-content {
-    padding: 12px;
-}
-
-.main-content {
-    height: calc(100vh - 88px);
-    max-height: calc(100vh - 88px);
-    padding-right: 32px;
-}
-
 .pn-modal {
     overflow-y: scroll;
     width: 100%;

panel/theme/css/bootstrap.css

@@ -65,6 +65,10 @@ button.accordion-header {
     border-radius: 0;
 }
 
+.card-header > .card-header-row {
+    margin-left: 15px;
+}
+
 :host(.card-title) h1, :host(.card-title) h2, :host(.card-title) h3,
 :host(.card-title) h4, :host(.card-title) h5, :host(.card-title) h6 {
     margin-block-end: 0;
@@ -622,7 +626,7 @@ input[type="radio"] + span {
     background-color: unset;
 }
 
-.tabulator .tabulator-headers, .tabulator .tabulator-header .tabulator-col {
+div .tabulator .tabulator-headers, div .tabulator .tabulator-header .tabulator-col {
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
 }

panel/theme/css/fast.css

@@ -129,12 +129,7 @@ canvas, img {
 /* Card */
 
 :host(.accordion), :host(.card) {
-    background-color: var(--neutral-fill-rest);
-}
-
-.card {
-    background-color: var(--neutral-fill-rest);
-    color: var(--neutral-foreground-rest);
+    background-color: var(--neutral-fill-layer-rest);
 }
 
 .card-header, .accordion-header {
@@ -149,6 +144,10 @@ canvas, img {
     margin: 1em;
 }
 
+.card-header > .card-header-row {
+    margin-left: 15px;
+}
+
 .card-button {
     display: block;
     margin-left: 0.5em;

panel/theme/css/material.css

@@ -16,25 +16,26 @@
 
 :host(.mdc-card), :host(.accordion) {
     color: var(--mdc-theme-on-surface);
-    background-color: var(--mdc-theme-surface);
+    background-color: var(--mdc-theme-background);
     box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px, rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
 }
 
 :host(.accordion) button, :host(.mdc-card) button {
-    color: var(--mdc-theme-on-surface);
-}
-
-:host(.mdc-card) {
-    border-radius: 4px;
+    color: var(--mdc-theme-on-background);
 }
 
 .card-header, .accordion-header {
     background-color: var(--mdc-theme-surface);
     border: unset;
+    border-radius: 0;
     border-bottom: 0.2px solid var(--mdc-theme-surface);
     padding: 0px 6px;
 }
 
+.card-header > .card-header-row {
+    margin-left: 15px;
+}
+
 button.mdc-button.mdc-card-button {
     color: transparent;
     height: 50px;
@@ -50,7 +51,6 @@ button.mdc-button.mdc-card-button {
     margin-block-start: 0;
 }
 
-
 /* Tabs styling */
 
 .bk-header {