Fix welcome composer on mobile
Adjust the welcome-screen composer so the shared chat input wraps cleanly on narrow phones. Reclaim hidden expand-button padding, suppress placeholder-only textarea scrollbars, and tune the iPhone-width placeholder sizing while preserving normal typed-message scrolling.
Alessandro committed
Jun 23, 2026 at 11:45 UTC
8e3dad559fa45f776f79471eade6f11258992a6f
1 file changed
+39
webui/components/welcome/welcome-screen.html
+39
@@ -841,7 +841,36 @@
841
}
842
843
.welcome-composer .input-row {
844
+ align-items: center;
845
+ flex-wrap: wrap;
846
min-height: 4.35rem;
847
+ row-gap: 0.55rem;
848
+ white-space: normal;
849
+ }
850
+
851
+ .welcome-composer #chat-input-container {
852
+ flex: 1 1 11.5rem;
853
+ width: auto;
854
+ min-width: min(11.5rem, calc(100% - 3rem));
855
+ }
856
+
857
+ .welcome-composer #chat-input {
858
+ min-height: 4.5rem;
859
+ padding-right: 0.35rem;
860
+ align-content: center;
861
+ }
862
+
863
+ .welcome-composer #chat-input:placeholder-shown {
864
+ overflow-y: hidden;
865
+ scrollbar-width: none;
866
+ }
867
+
868
+ .welcome-composer #chat-input:placeholder-shown::-webkit-scrollbar {
869
+ display: none;
870
+ }
871
+
872
+ .welcome-composer #chat-buttons-wrapper {
873
+ margin-left: auto;
874
}
875
876
.welcome-setup-composer {
@@ -905,6 +934,16 @@
934
grid-template-columns: 1fr;
935
}
936
}
937
+
938
+ @media (max-width: 420px) {
939
+ .welcome-composer #chat-input:placeholder-shown {
940
+ min-height: 5rem;
941
+ padding-top: 0.52rem;
942
+ padding-bottom: 0.52rem;
943
+ font-size: 0.96rem;
944
+ line-height: 1.34;
945
+ }
946
+ }
947
</style>
948
</body>
949