kmaterialize 2.3.3-1.0.20 → 2.3.3-1.0.22

package/components/kanban/_kanban.scss

@@ -0,0 +1,217 @@
+.kanban-board {
+  --kanban-column-width: 20rem;
+  --kanban-gap: 1rem;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kanban-gap);
+  width: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  box-sizing: border-box;
+  overscroll-behavior-x: contain;
+
+  &.kanban-wrap {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+}
+
+.kanban-column {
+  display: flex;
+  flex: 0 0 var(--kanban-column-width);
+  flex-direction: column;
+  min-height: 15rem;
+  padding: 0.75rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.875rem;
+  background: var(--md-sys-color-surface-variant);
+  box-sizing: border-box;
+  transition: border-color 160ms ease, background-color 160ms ease;
+
+  &.is-drag-over {
+    border-color: var(--md-sys-color-primary);
+    background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
+  }
+}
+
+.kanban-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.25rem 0.75rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.kanban-column-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-column-count {
+  display: inline-flex;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  font-size: 0.75rem;
+}
+
+.kanban-column-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 8rem;
+}
+
+.kanban-card {
+  --kanban-card-accent: var(--md-sys-color-primary);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.75rem;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  cursor: grab;
+  user-select: none;
+  overflow: hidden;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
+
+  &:active,
+  &.is-dragging {
+    cursor: grabbing;
+  }
+
+  &.is-dragging {
+    opacity: 0.45;
+    box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+
+  &.kanban-card-accent {
+    &::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 0.25rem;
+      background: var(--kanban-card-accent);
+      content: '';
+      pointer-events: none;
+    }
+  }
+
+  &.kanban-card-accent-top::after {
+    top: 0;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 0.25rem;
+  }
+
+  &.kanban-card-accent-right::after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.kanban-card-accent-left::after {
+    top: 0;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+  }
+
+  &.is-disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.55;
+    filter: saturate(0.55);
+  }
+}
+
+.kanban-drag-image {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+  z-index: -1;
+  pointer-events: none;
+  transform: rotate(2deg) scale(1.015);
+  transform-origin: center;
+}
+
+.kanban-drop-preview {
+  min-height: 4rem;
+  box-sizing: border-box;
+  border: 2px dashed var(--md-sys-color-primary);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
+  pointer-events: none;
+}
+
+.kanban-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-card-description {
+  margin: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+.kanban-card-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.75rem;
+}
+
+.kanban-card-label {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font-size: 0.75rem;
+}
+
+.kanban-empty {
+  display: grid;
+  min-height: 5rem;
+  place-items: center;
+  border: 1px dashed var(--md-sys-color-outline);
+  border-radius: 0.625rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+  .kanban-board {
+    --kanban-column-width: min(20rem, calc(100vw - 3rem));
+  }
+}

package/components/kanban/kanban.ts

@@ -0,0 +1,182 @@
+import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
+
+export interface KanbanMoveDetail {
+  card: HTMLElement;
+  from: HTMLElement;
+  to: HTMLElement;
+}
+
+export interface KanbanOptions extends BaseOptions {
+  /** Enable native drag-and-drop interactions. */
+  draggable: boolean;
+  /** Called after a card changes column or order. */
+  onMove?: (detail: KanbanMoveDetail) => void;
+}
+
+const _defaults: KanbanOptions = {
+  draggable: true
+};
+
+/** A lightweight, dependency-free board for columns of draggable cards. */
+export class Kanban extends Component<KanbanOptions> {
+  private _draggedCard: HTMLElement | null = null;
+  private _dragSourceColumn: HTMLElement | null = null;
+  private _dropPreview: HTMLElement | null = null;
+  private _dragImage: HTMLElement | null = null;
+  private _previewHeight = 64;
+
+  private _onDragStart = (event: DragEvent) => {
+    const card = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true') return;
+    this._draggedCard = card;
+    this._dragSourceColumn = card.closest<HTMLElement>('.kanban-column');
+    this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
+    card.classList.add('is-dragging');
+    this._dragImage = card.cloneNode(true) as HTMLElement;
+    this._dragImage.classList.remove('is-dragging');
+    this._dragImage.classList.add('kanban-drag-image');
+    this._dragImage.setAttribute('aria-hidden', 'true');
+    this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+    document.body.appendChild(this._dragImage);
+    event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
+    event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  };
+
+  private _onDragOver = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-column');
+    if (!column || !this.el.contains(column)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+    column.classList.add('is-drag-over');
+    this._updateDropPreview(column, event);
+  };
+
+  private _onDrop = (event: DragEvent) => {
+    if (!this._draggedCard) return;
+    const column = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-column');
+    if (!column || !this.el.contains(column)) return;
+    event.preventDefault();
+    const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
+    const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    const source = this._dragSourceColumn;
+    const movedCard = this._draggedCard;
+    if (this._dropPreview?.parentElement === body) {
+      body.insertBefore(movedCard, this._dropPreview);
+      this._dropPreview.remove();
+    } else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+      body.insertBefore(movedCard, targetCard);
+    } else {
+      body.appendChild(movedCard);
+    }
+    this._clearDragState();
+    this._updateCounts();
+    if (source && source !== column) this.options.onMove?.({ card: movedCard, from: source, to: column });
+  };
+
+  private _onDragEnd = () => this._clearDragState();
+
+  constructor(el: HTMLElement, options: Partial<KanbanOptions>) {
+    super(el, options, Kanban);
+    this.options = { ...Kanban.defaults, ...options };
+    this.el['M_Kanban'] = this;
+    this._prepareMarkup();
+    if (this.options.draggable) this._bindEvents();
+  }
+
+  static get defaults(): KanbanOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<KanbanOptions>): Kanban;
+  static init(els: InitElements<MElement>, options?: Partial<KanbanOptions>): Kanban[];
+  static init(els: HTMLElement | InitElements<MElement>, options: Partial<KanbanOptions> = {}): Kanban | Kanban[] {
+    return super.init(els, options, Kanban);
+  }
+
+  static getInstance(el: HTMLElement): Kanban {
+    return el['M_Kanban'];
+  }
+
+  private _prepareMarkup() {
+    this.el.setAttribute('role', 'region');
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      column.setAttribute('role', 'group');
+      const body = column.querySelector<HTMLElement>('.kanban-column-body');
+      if (body) body.setAttribute('role', 'list');
+      column.querySelectorAll<HTMLElement>('.kanban-card').forEach((card) => {
+        card.setAttribute('role', 'listitem');
+        const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+        card.setAttribute('tabindex', disabled ? '-1' : '0');
+        if (disabled) {
+          card.setAttribute('aria-disabled', 'true');
+          card.draggable = false;
+        } else if (this.options.draggable) {
+          card.draggable = true;
+        }
+      });
+    });
+    this._updateCounts();
+  }
+
+  private _bindEvents() {
+    this.el.addEventListener('dragstart', this._onDragStart);
+    this.el.addEventListener('dragover', this._onDragOver);
+    this.el.addEventListener('drop', this._onDrop);
+    this.el.addEventListener('dragend', this._onDragEnd);
+  }
+
+  private _clearDragState() {
+    this._dragImage?.remove();
+    this._dragImage = null;
+    this._dropPreview?.remove();
+    this._dropPreview = null;
+    this._draggedCard?.classList.remove('is-dragging');
+    this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
+    this._draggedCard = null;
+    this._dragSourceColumn = null;
+    this._previewHeight = 64;
+  }
+
+  private _updateCounts() {
+    this.el.querySelectorAll<HTMLElement>('.kanban-column').forEach((column) => {
+      const count = column.querySelector<HTMLElement>('.kanban-column-count');
+      const body = column.querySelector<HTMLElement>('.kanban-column-body');
+      if (count && body) count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+      const empty = body?.querySelector<HTMLElement>('.kanban-empty');
+      if (empty && body) empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
+    });
+  }
+
+  private _updateDropPreview(column: HTMLElement, event: DragEvent) {
+    const body = column.querySelector<HTMLElement>('.kanban-column-body') || column;
+    const targetCard = (event.target as HTMLElement | null)?.closest<HTMLElement>('.kanban-card');
+    if (targetCard === this._draggedCard) return;
+    if (!this._dropPreview) {
+      this._dropPreview = document.createElement('div');
+      this._dropPreview.className = 'kanban-drop-preview';
+      this._dropPreview.setAttribute('aria-hidden', 'true');
+    }
+    // Keep the preview tied to the dragged card's original height. Using the
+    // hovered card's height makes the placeholder jump as the pointer crosses
+    // cards with different content lengths.
+    this._dropPreview.style.height = `${this._previewHeight}px`;
+    if (targetCard && targetCard.parentElement === body) {
+      const box = targetCard.getBoundingClientRect();
+      body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+    } else if (this._dropPreview.parentElement !== body) {
+      body.appendChild(this._dropPreview);
+    }
+  }
+
+  destroy() {
+    this._clearDragState();
+    this.el.removeEventListener('dragstart', this._onDragStart);
+    this.el.removeEventListener('dragover', this._onDragOver);
+    this.el.removeEventListener('drop', this._onDrop);
+    this.el.removeEventListener('dragend', this._onDragEnd);
+    delete this.el['M_Kanban'];
+  }
+}

package/dist/css/materialize.colors.min.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */

package/dist/css/materialize.css

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -13863,6 +13863,296 @@ button.btn-floating {
             transform: translateY(-0.25rem);
   }
 }
+.kanban-board {
+  --kanban-column-width: 20rem;
+  --kanban-gap: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  gap: var(--kanban-gap);
+  width: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overscroll-behavior-x: contain;
+}
+.kanban-board.kanban-wrap {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  overflow-x: visible;
+}
+
+.kanban-column {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 var(--kanban-column-width);
+      -ms-flex: 0 0 var(--kanban-column-width);
+          flex: 0 0 var(--kanban-column-width);
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 15rem;
+  padding: 0.75rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.875rem;
+  background: var(--md-sys-color-surface-variant);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: border-color 160ms ease, background-color 160ms ease;
+  transition: border-color 160ms ease, background-color 160ms ease;
+}
+.kanban-column.is-drag-over {
+  border-color: var(--md-sys-color-primary);
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, var(--md-sys-color-surface-variant));
+}
+
+.kanban-column-header {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.25rem 0.75rem;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.kanban-column-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-column-count {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  font-size: 0.75rem;
+}
+
+.kanban-column-body {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 0.75rem;
+  min-height: 8rem;
+}
+
+.kanban-card {
+  --kanban-card-accent: var(--md-sys-color-primary);
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 0.75rem;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  -webkit-box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+          box-shadow: var(--md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
+  transition: opacity 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
+  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease, -webkit-transform 160ms ease, -webkit-box-shadow 160ms ease;
+}
+.kanban-card:active, .kanban-card.is-dragging {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.kanban-card.is-dragging {
+  opacity: 0.45;
+  -webkit-box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
+          box-shadow: var(--md-sys-elevation-level3, 0 8px 18px rgba(0, 0, 0, 0.2));
+}
+.kanban-card:focus-visible {
+  outline: 2px solid var(--md-sys-color-primary);
+  outline-offset: 2px;
+}
+.kanban-card.kanban-card-accent::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 0.25rem;
+  background: var(--kanban-card-accent);
+  content: "";
+  pointer-events: none;
+}
+.kanban-card.kanban-card-accent-top::after {
+  top: 0;
+  bottom: auto;
+  left: 0;
+  width: 100%;
+  height: 0.25rem;
+}
+.kanban-card.kanban-card-accent-right::after {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  width: 0.25rem;
+  height: 100%;
+}
+.kanban-card.kanban-card-accent-left::after {
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: 0.25rem;
+  height: 100%;
+}
+.kanban-card.is-disabled, .kanban-card[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.55;
+  -webkit-filter: saturate(0.55);
+          filter: saturate(0.55);
+}
+
+.kanban-drag-image {
+  position: fixed !important;
+  top: -10000px !important;
+  left: -10000px !important;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-transform: rotate(2deg) scale(1.015);
+          transform: rotate(2deg) scale(1.015);
+  -webkit-transform-origin: center;
+          transform-origin: center;
+}
+
+.kanban-drop-preview {
+  min-height: 4rem;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border: 2px dashed var(--md-sys-color-primary);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--md-sys-color-primary-container) 45%, transparent);
+  pointer-events: none;
+}
+
+.kanban-card-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.kanban-card-description {
+  margin: 0;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+.kanban-card-meta {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  gap: 0.5rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.75rem;
+}
+
+.kanban-card-label {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-align-self: flex-start;
+      -ms-flex-item-align: start;
+          align-self: flex-start;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 999px;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font-size: 0.75rem;
+}
+
+.kanban-empty {
+  display: grid;
+  min-height: 5rem;
+  place-items: center;
+  border: 1px dashed var(--md-sys-color-outline);
+  border-radius: 0.625rem;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+  .kanban-board {
+    --kanban-column-width: min(20rem, calc(100vw - 3rem));
+  }
+}
 .collapsible {
   padding-left: 0;
   list-style-type: none;