form-preview-df/src/df-form-controls/df-form-grid/df-form-grid.css

Resusable Form Preview Components

/* DataGrid Table Scrollbar Styling */
.table-scroll-container {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--df-color-fb-border) var(--df-color-fb-icon-bg);
}

/* WebKit browsers (Chrome, Safari, Edge) */
.table-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
  background: var(--df-color-fb-icon-bg);
  border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb {
  background: var(--df-color-fb-border);
  border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--df-color-text-light);
}

/* Smooth scrolling */
.table-scroll-container {
  scroll-behavior: smooth;
}

/* Table cell content overflow handling */
.table-cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
  .table-scroll-container {
    /* On mobile, make scroll more obvious */
    scrollbar-width: auto;
  }
  
  .table-scroll-container::-webkit-scrollbar {
    height: 12px;
  }
}