webui: add print styles for full chat printing
Implement CSS print media queries across key webui components to ensure
complete chat conversations can be printed without content truncation.
They're not perfect but better than nothing.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3815b4291912c721k
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 9fa5b7a..35897b4 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -744,6 +744,56 @@
.mermaid {
text-align: center;
}
+
+ /* Print styles for message components */
+ @media print {
+ .message {
+ page-break-inside: avoid;
+ margin-bottom: 12px;
+ }
+
+ .message-container {
+ page-break-inside: avoid;
+ }
+
+ /* Hide copy buttons and interactive elements during printing */
+ .copy-icon,
+ .info-icon,
+ .commit-diff-button {
+ display: none !important;
+ }
+
+ /* Ensure code blocks print properly */
+ .message-content pre {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ page-break-inside: avoid;
+ background: #f8f8f8 !important;
+ border: 1px solid #ddd !important;
+ padding: 8px !important;
+ }
+
+ /* Ensure tool calls section prints properly */
+ .tool-calls-section {
+ page-break-inside: avoid;
+ }
+
+ /* Simplify message metadata for print */
+ .message-metadata-left {
+ font-size: 10px;
+ }
+
+ /* Ensure content doesn't break poorly */
+ .message-content {
+ orphans: 3;
+ widows: 3;
+ }
+
+ /* Hide floating messages during print */
+ .floating-message {
+ display: none !important;
+ }
+ }
`;
// Track mermaid diagrams that need rendering