@kaifronsdal/transcript-viewer/src/app.css

A web-based viewer for AI conversation transcripts with rollback support

@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@plugin 'daisyui';

/* Configure dark mode variant */
@variant dark (&:where(.dark, .dark *));

/* Custom styles for transcript viewer */
.message-content {
	word-wrap: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* Prevent scrollbar flickering in table cells */
.table-cell-no-scrollbar {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
}

.table-cell-no-scrollbar::-webkit-scrollbar {
	display: none; /* WebKit */
}

/* Alternative: Stable scrollbar space reservation (better for accessibility) */
.table-cell-stable-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shifts */
}

/* Utility class for cells that need scrolling but want to minimize flickering */
.table-cell-smooth-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	/* Use smooth scrolling and prevent rapid show/hide of scrollbars */
	scroll-behavior: smooth;
	/* Ensure scrollbar space is reserved */
	scrollbar-gutter: stable both-edges;
}