admin/lennyzeltser-conversation-replay
1
0
Fork 0
mirror of https://github.com/lennyzeltser/conversation-replay synced 2026-06-21 13:55:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Additional mobile CSS improvements and regenerate examples

Browse Source 
- Prevent vertical scroll movement on tabs container
- Ensure tabs don't overflow parent container
- Enforce square aspect ratio on play button icon
- Center play icon in flex container
This commit is contained in:
lennyzeltser
2026-01-15 01:26:35 -05:00
parent 7606c985ff
commit e0921d6456
3 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/ir-report.html
+42 -6
View File
@@ -255,14 +255,43 @@
}
@media (max-width: 600px) {
.tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden; /* Prevent vertical movement */
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
max-width: 100%; /* Ensure it doesn't overflow parent */
/* Hide scrollbars */
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
padding: 10px 14px;
font-size: 12px;
flex: 1;
flex: 0 0 auto; /* Don't shrink, let them scroll */
text-align: center;
min-width: 0;
white-space: nowrap;
}
}
/* In iframe, ensure non-active tabs are visible against potentially dark/complex backgrounds */
body.in-iframe .tab:not(.active) {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
:root[data-theme="dark"] body.in-iframe .tab:not(.active) {
background: rgba(30, 41, 59, 0.5);
color: rgba(248, 250, 252, 0.7);
}
.chat-wrapper {
@@ -305,7 +334,7 @@
display: none; /* Chrome Safari */
}
.chat-container.fading {
.chat-container.fading .chat-scroll-area {
opacity: 0;
}
@@ -363,7 +392,7 @@
min-height: 0;
max-height: none !important; /* Remove height constraint in iframe */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow in iframe */
/* Keep border and background for visual definition */
background: var(--bg-chat) !important; /* Ensure opaque background in iframe */
margin-bottom: clamp(70px, 15vh, 120px); /* Responsive space for fixed controls */
}
@@ -412,6 +441,11 @@
.play-overlay-icon {
width: 64px; /* Slightly smaller for elegance */
height: 64px;
flex: 0 0 auto; /* Prevent squishing on small screens */
min-width: 64px;
min-height: 64px;
aspect-ratio: 1/1; /* Enforce square aspect ratio */
margin: auto; /* Center in flex container if needed */
background: white;
border-radius: 50%;
display: flex;
@@ -930,6 +964,8 @@
.play-overlay-icon {
width: 70px;
height: 70px;
min-width: 70px;
min-height: 70px;
}
.play-overlay-icon svg {
@@ -949,13 +985,13 @@
padding: 8px;
}
/* Very small phones - keep scrolling tabs instead of stacking */
.tabs {
flex-direction: column;
gap: 4px;
}
.tab {
width: 100%;
/* width: 100%; Removed to prevent full stacking */
text-align: center;
}
@@ -1143,7 +1179,7 @@
<a href="https://github.com/lennyzeltser/conversation-replay" target="_blank" rel="noopener noreferrer" class="info-title-link">Conversation Replay</a>
<div class="info-meta">
<span>Created by <a href="https://zeltser.com" target="_blank" rel="noopener noreferrer" class="info-link">Lenny Zeltser</a></span>
<span>Version 0.1.0</span>
<span>Version 0.1.10</span>
</div>
</div>
</div>
examples/london-scam.html
+12 -5
View File
@@ -250,7 +250,7 @@
display: none; /* Chrome Safari */
}
.chat-container.fading {
.chat-container.fading .chat-scroll-area {
opacity: 0;
}
@@ -308,7 +308,7 @@
min-height: 0;
max-height: none !important; /* Remove height constraint in iframe */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; /* Subtle shadow in iframe */
/* Keep border and background for visual definition */
background: var(--bg-chat) !important; /* Ensure opaque background in iframe */
margin-bottom: clamp(70px, 15vh, 120px); /* Responsive space for fixed controls */
}
@@ -357,6 +357,11 @@
.play-overlay-icon {
width: 64px; /* Slightly smaller for elegance */
height: 64px;
flex: 0 0 auto; /* Prevent squishing on small screens */
min-width: 64px;
min-height: 64px;
aspect-ratio: 1/1; /* Enforce square aspect ratio */
margin: auto; /* Center in flex container if needed */
background: white;
border-radius: 50%;
display: flex;
@@ -875,6 +880,8 @@
.play-overlay-icon {
width: 70px;
height: 70px;
min-width: 70px;
min-height: 70px;
}
.play-overlay-icon svg {
@@ -894,13 +901,13 @@
padding: 8px;
}
/* Very small phones - keep scrolling tabs instead of stacking */
.tabs {
flex-direction: column;
gap: 4px;
}
.tab {
width: 100%;
/* width: 100%; Removed to prevent full stacking */
text-align: center;
}
@@ -1082,7 +1089,7 @@
<a href="https://github.com/lennyzeltser/conversation-replay" target="_blank" rel="noopener noreferrer" class="info-title-link">Conversation Replay</a>
<div class="info-meta">
<span>Created by <a href="https://zeltser.com" target="_blank" rel="noopener noreferrer" class="info-link">Lenny Zeltser</a></span>
<span>Version 0.1.0</span>
<span>Version 0.1.10</span>
</div>
</div>
</div>
src/generator.ts
+5 -1
View File
@@ -232,8 +232,10 @@ function generateCss(theme: Theme, hasMultipleScenarios: boolean, colors?: Color
.tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden; /* Prevent vertical movement */
-webkit-overflow-scrolling: touch;
padding-bottom: 0;
max-width: 100%; /* Ensure it doesn't overflow parent */
/* Hide scrollbars */
scrollbar-width: none;
-ms-overflow-style: none;
@@ -619,9 +621,11 @@ function generateCss(theme: Theme, hasMultipleScenarios: boolean, colors?: Color
.play-overlay-icon {
width: 64px; /* Slightly smaller for elegance */
height: 64px;
flex-shrink: 0; /* Prevent squishing on small screens */
flex: 0 0 auto; /* Prevent squishing on small screens */
min-width: 64px;
min-height: 64px;
aspect-ratio: 1/1; /* Enforce square aspect ratio */
margin: auto; /* Center in flex container if needed */
background: white;
border-radius: 50%;
display: flex;