Skip to content

Commit 09ab3f5

Browse files
sureshgsureshg
committed
chore: make mobile friendly
1 parent 2268039 commit 09ab3f5

File tree

1 file changed

+231
-4
lines changed

1 file changed

+231
-4
lines changed

‎app/trace-viewer/index.html‎

Lines changed: 231 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -685,6 +685,229 @@
685685
margin-left: 4px;
686686
vertical-align: baseline;
687687
}
688+
689+
/* Mobile responsive styles */
690+
@media (max-width: 768px) {
691+
body {
692+
height: 100vh;
693+
height: 100dvh; /* For better mobile viewport handling */
694+
}
695+
696+
.header {
697+
flex-wrap: wrap;
698+
gap: 6px;
699+
padding: 10px 12px;
700+
}
701+
702+
.header h1 {
703+
font-size: 16px;
704+
width: 100%;
705+
margin-bottom: 6px;
706+
}
707+
708+
.theme-toggle {
709+
position: static;
710+
order: -1;
711+
margin-left: auto;
712+
padding: 4px 8px;
713+
font-size: 12px;
714+
}
715+
716+
.btn {
717+
padding: 6px 10px;
718+
font-size: 12px;
719+
min-height: 32px;
720+
white-space: nowrap;
721+
}
722+
723+
.url-input {
724+
width: 150px;
725+
min-width: 120px;
726+
font-size: 12px;
727+
padding: 6px 8px;
728+
}
729+
730+
.stats {
731+
margin: 0;
732+
font-size: 10px;
733+
width: 100%;
734+
justify-content: center;
735+
order: 10;
736+
gap: 12px;
737+
}
738+
739+
.main {
740+
flex-direction: column;
741+
min-height: 0;
742+
}
743+
744+
.sidebar {
745+
width: 100%;
746+
max-height: 40vh;
747+
border-right: none;
748+
border-bottom: 1px solid var(--border-primary);
749+
flex-shrink: 0;
750+
}
751+
752+
.sidebar-header {
753+
padding: 10px;
754+
}
755+
756+
.search-input {
757+
padding: 8px 10px;
758+
font-size: 14px;
759+
}
760+
761+
.trace-list {
762+
padding: 6px;
763+
overflow-y: auto;
764+
-webkit-overflow-scrolling: touch;
765+
}
766+
767+
.trace-item {
768+
padding: 10px;
769+
margin-bottom: 6px;
770+
font-size: 13px;
771+
}
772+
773+
.trace-name {
774+
font-size: 13px;
775+
padding-right: 30px;
776+
}
777+
778+
.trace-id {
779+
font-size: 10px;
780+
padding-right: 30px;
781+
}
782+
783+
.trace-timestamp {
784+
font-size: 9px;
785+
padding-right: 30px;
786+
}
787+
788+
.trace-info {
789+
font-size: 11px;
790+
}
791+
792+
.content {
793+
flex: 1;
794+
min-height: 0;
795+
}
796+
797+
.content-header {
798+
padding: 10px 12px;
799+
flex-direction: column;
800+
gap: 8px;
801+
align-items: stretch;
802+
}
803+
804+
.trace-details {
805+
width: 100%;
806+
}
807+
808+
.trace-title {
809+
font-size: 14px;
810+
}
811+
812+
.trace-subtitle {
813+
font-size: 11px;
814+
}
815+
816+
.trace-controls {
817+
display: flex;
818+
justify-content: space-between;
819+
gap: 8px;
820+
}
821+
822+
.expand-all-btn,
823+
.clear-all-btn {
824+
flex: 1;
825+
font-size: 11px;
826+
padding: 6px 8px;
827+
}
828+
829+
.timeline-header {
830+
grid-template-columns: 180px 1fr;
831+
font-size: 10px;
832+
height: 36px;
833+
}
834+
835+
.timeline-body {
836+
-webkit-overflow-scrolling: touch;
837+
}
838+
839+
.span-row {
840+
grid-template-columns: 180px 1fr;
841+
min-height: 28px;
842+
}
843+
844+
.span-label {
845+
padding: 4px 8px;
846+
font-size: 11px;
847+
}
848+
849+
.span-name {
850+
font-size: 11px;
851+
}
852+
853+
.span-duration-label {
854+
font-size: 9px;
855+
}
856+
857+
.expand-btn {
858+
width: 20px;
859+
height: 20px;
860+
font-size: 12px;
861+
}
862+
863+
.footer {
864+
padding: 8px 12px;
865+
font-size: 10px;
866+
}
867+
868+
.tooltip {
869+
max-width: 280px;
870+
font-size: 11px;
871+
padding: 8px;
872+
left: 10px !important;
873+
right: 10px !important;
874+
width: auto !important;
875+
}
876+
}
877+
878+
@media (max-width: 480px) {
879+
.header {
880+
padding: 8px 10px;
881+
}
882+
883+
.btn {
884+
font-size: 11px;
885+
padding: 5px 8px;
886+
}
887+
888+
.url-input {
889+
width: 120px;
890+
font-size: 11px;
891+
}
892+
893+
.timeline-header {
894+
grid-template-columns: 140px 1fr;
895+
}
896+
897+
.span-row {
898+
grid-template-columns: 140px 1fr;
899+
}
900+
901+
.span-label {
902+
padding: 3px 6px;
903+
}
904+
905+
.expand-all-btn,
906+
.clear-all-btn {
907+
font-size: 10px;
908+
padding: 5px 6px;
909+
}
910+
}
688911
</style>
689912
</head>
690913
<body>
@@ -752,8 +975,9 @@ <h1>⏱️ Trace Viewer</h1>
752975

753976
<div class="footer">
754977
<div style="margin-bottom: 6px;">
755-
Built with ❤️ for <a href="https://github.com/JetBrains/amper">Kotlin Amper</a> Build Traces •
756-
<a href="?url=https://gist.githubusercontent.com/sureshg/c0f0abd0a96b663000b18ca11d657fe9/raw">🔗 Share via URL</a>
978+
Built with ❤️ for <a href="https://github.com/JetBrains/amper">Kotlin Amper</a> Build Traces •
979+
<a href="?url=https://gist.githubusercontent.com/sureshg/c0f0abd0a96b663000b18ca11d657fe9/raw">🔗 Share via
980+
URL</a>
757981
</div>
758982
<div style="font-size: 13px; opacity: 0.8;">
759983
<a href="https://suresh.dev" target="_blank" rel="noopener noreferrer">suresh.dev</a>
@@ -823,9 +1047,12 @@ <h1>⏱️ Trace Viewer</h1>
8231047
}
8241048
}
8251049

826-
// Initialize theme from localStorage
1050+
// Initialize theme from localStorage - default to dark theme
8271051
var savedTheme = localStorage.getItem('theme');
828-
if (savedTheme === 'dark') {
1052+
if (savedTheme === 'light') {
1053+
document.documentElement.removeAttribute('data-theme');
1054+
document.getElementById('theme-icon').textContent = '🌙';
1055+
} else {
8291056
document.documentElement.setAttribute('data-theme', 'dark');
8301057
document.getElementById('theme-icon').textContent = '☀️';
8311058
}

0 commit comments

Comments
 (0)