Skip to content

Commit 5bd604a

Browse files
CWade3051CWade3051
committed
Improve responsive styles for mobile and tablet layouts
Enhanced CSS across multiple components to improve mobile and tablet responsiveness, including layout adjustments, spacing, font sizes, and flex behavior. Added media queries for better support on small screens and iPad devices, ensuring consistent appearance and usability across breakpoints.
1 parent 10f44e2 commit 5bd604a

File tree

5 files changed

+298
-18
lines changed

5 files changed

+298
-18
lines changed

‎app/frontend/src/components/AIModeToggle/AIModeToggle.module.css‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
display: flex;
33
gap: 8px;
44
align-items: center;
5-
margin-left: 205px;
5+
margin-left: 0;
6+
justify-content: center;
7+
width: 100%;
68
}
79

810
.optionSlider {
9-
width: 300px;
11+
width: 100%;
12+
max-width: 300px;
1013
position: relative;
1114
user-select: none;
1215
}
@@ -65,3 +68,56 @@
6568
font-weight: bold;
6669
color: #fff;
6770
}
71+
72+
/* Small phones */
73+
@media (max-width: 600px) {
74+
.aiModeToggle {
75+
margin-left: 0;
76+
justify-content: center;
77+
}
78+
79+
.optionSlider {
80+
max-width: 280px;
81+
min-width: 250px;
82+
}
83+
84+
.sliderOption {
85+
font-size: 10px;
86+
}
87+
88+
.sliderThumb {
89+
font-size: 10px;
90+
}
91+
}
92+
93+
/* Larger phones and tablets */
94+
@media (min-width: 601px) and (max-width: 991px) {
95+
.aiModeToggle {
96+
margin-left: 0;
97+
justify-content: center;
98+
}
99+
100+
.optionSlider {
101+
max-width: 300px;
102+
min-width: 280px;
103+
}
104+
105+
.sliderOption {
106+
font-size: 11px;
107+
}
108+
109+
.sliderThumb {
110+
font-size: 11px;
111+
}
112+
}
113+
114+
@media (min-width: 992px) {
115+
.aiModeToggle {
116+
margin-left: 205px;
117+
}
118+
119+
.optionSlider {
120+
width: 300px;
121+
max-width: 300px;
122+
}
123+
}

‎app/frontend/src/components/Example/Example.module.css‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
padding-right: 1rem;
55
display: flex;
66
flex-wrap: wrap;
7-
gap: 0.625rem;
7+
gap: 0.5rem; /* Reduced gap for tighter spacing */
88
flex: 1;
99
justify-content: center;
10+
margin-top: 1rem; /* Add some top margin */
11+
margin-bottom: 2rem; /* Add bottom margin for better centering */
1012
}
1113

1214
.example {
@@ -15,7 +17,7 @@
1517
border-radius: 0.5rem;
1618
display: flex;
1719
flex-direction: column;
18-
margin-bottom: 0.3125rem;
20+
margin-bottom: 0.125rem; /* Much smaller bottom margin */
1921
cursor: pointer;
2022
}
2123

@@ -28,19 +30,54 @@
2830

2931
.exampleText {
3032
margin: 0;
31-
font-size: 1.25rem;
32-
width: 25rem;
33-
padding: 0.5rem;
34-
min-height: 4.5rem;
33+
font-size: 1.1rem; /* Smaller font for mobile */
34+
width: 22rem; /* Slightly smaller width for mobile */
35+
padding: 0.75rem; /* Increased padding for better touch target */
36+
min-height: 3.5rem; /* Reduced min-height for tighter spacing */
3537
}
3638

3739
.examplesNavList li {
3840
display: none;
3941
}
4042

4143
.examplesNavList li:nth-of-type(1),
42-
.examplesNavList li:nth-of-type(2) {
43-
display: block; /* Default to showing two list items */
44+
.examplesNavList li:nth-of-type(2),
45+
.examplesNavList li:nth-of-type(3) {
46+
display: block; /* Show all three list items on mobile and tablet */
47+
}
48+
49+
/* Mobile-specific adjustments */
50+
@media only screen and (max-width: 600px) {
51+
.examplesNavList {
52+
gap: 0.5rem; /* Consistent gap between boxes */
53+
margin-top: 0.5rem; /* Small top margin */
54+
margin-bottom: 1rem; /* Reasonable bottom margin */
55+
flex-direction: column; /* Stack vertically on mobile */
56+
align-items: center; /* Center the boxes */
57+
padding-left: 1rem;
58+
padding-right: 1rem;
59+
}
60+
61+
.example {
62+
margin-bottom: 0; /* No additional margin, use gap instead */
63+
width: 100%; /* Full width on mobile */
64+
max-width: 22rem; /* Consistent with desktop-like sizing */
65+
min-height: 4rem; /* Fixed minimum height for consistency */
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
padding: 0; /* Remove padding from container, let text handle it */
70+
}
71+
72+
.exampleText {
73+
font-size: 0.95rem; /* Slightly larger font for readability */
74+
width: 100%; /* Full width of container */
75+
padding: 1rem; /* Consistent padding like desktop */
76+
min-height: auto; /* Let content determine height */
77+
text-align: left; /* Left align like desktop */
78+
display: block; /* Standard block display */
79+
line-height: 1.4; /* Better line spacing */
80+
}
4481
}
4582

4683
@media only screen and (min-width: 992px) {

‎app/frontend/src/index.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,22 @@ html {
1919
sans-serif;
2020
-webkit-font-smoothing: antialiased;
2121
-moz-osx-font-smoothing: grayscale;
22+
height: 100vh; /* Use viewport height */
23+
overflow: hidden; /* Prevent any scrolling at root level */
2224
}
2325

2426
body {
25-
height: 100%;
27+
height: 100vh; /* Use viewport height */
2628
margin: 0;
2729
padding: 0;
30+
overflow: hidden; /* Prevent body scroll */
2831
}
2932

3033
#root {
31-
height: 100%;
34+
height: 100vh; /* Use viewport height */
35+
overflow: hidden; /* Prevent root overflow */
36+
display: flex;
37+
flex-direction: column;
3238
}
3339

3440
@media (min-width: 480px) {

‎app/frontend/src/pages/chat/Chat.module.css‎

Lines changed: 114 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,27 +96,127 @@
9696
display: flex;
9797
justify-content: space-between;
9898
align-items: center;
99+
flex-wrap: wrap;
100+
gap: 0.5rem;
101+
padding: 0.5rem;
99102
}
100103

101104
.commandsContainer {
102105
display: flex;
103-
padding-left: 1rem;
104-
padding-right: 1rem;
106+
flex-wrap: wrap;
107+
gap: 0.5rem;
108+
padding-left: 0.5rem;
109+
padding-right: 0.5rem;
105110
align-self: flex-end;
111+
min-width: 0;
106112
}
107113

108114
.commandsCenter {
109115
display: flex;
110116
justify-content: center;
111117
align-items: center;
112118
flex: 1;
113-
margin-left: 85px;
119+
margin-left: 0;
120+
min-width: 0;
121+
order: 1;
114122
}
115123

116124
.commandButton {
117125
margin-bottom: 1.25rem;
118126
}
119127

128+
/* Small phones - stack everything vertically */
129+
@media (max-width: 600px) {
130+
.commandsSplitContainer {
131+
flex-direction: column;
132+
align-items: center;
133+
gap: 0.5rem;
134+
padding: 0.25rem;
135+
}
136+
137+
.commandsContainer {
138+
justify-content: center;
139+
flex-wrap: wrap;
140+
gap: 0.25rem;
141+
padding: 0.25rem;
142+
width: 100%;
143+
}
144+
145+
/* Left-align the first container for history button */
146+
.commandsContainer:first-child {
147+
justify-content: flex-start;
148+
align-self: flex-start;
149+
}
150+
151+
.commandsCenter {
152+
order: -1;
153+
margin-left: 0;
154+
margin-bottom: 0.5rem;
155+
width: 100%;
156+
text-align: center;
157+
}
158+
159+
.commandButton {
160+
margin: 0.25rem;
161+
font-size: 0.875rem;
162+
min-width: 120px;
163+
}
164+
165+
/* Make chat container fill available space without forcing scroll */
166+
.chatContainer {
167+
min-height: calc(100vh - 18rem);
168+
justify-content: space-between;
169+
}
170+
171+
.chatEmptyState {
172+
flex-grow: 1;
173+
justify-content: center;
174+
padding-top: 1rem;
175+
}
176+
177+
/* Position chat input at bottom on mobile */
178+
.chatInput {
179+
margin-top: auto;
180+
position: sticky;
181+
bottom: 0;
182+
}
183+
}
184+
185+
/* Larger phones and small tablets - keep horizontal layout */
186+
@media (min-width: 601px) and (max-width: 991px) {
187+
.commandsSplitContainer {
188+
flex-direction: row;
189+
justify-content: space-between;
190+
align-items: center;
191+
gap: 0.5rem;
192+
padding: 0.25rem;
193+
flex-wrap: wrap;
194+
}
195+
196+
.commandsContainer {
197+
justify-content: flex-end;
198+
flex-wrap: wrap;
199+
gap: 0.25rem;
200+
padding: 0.25rem;
201+
flex: 1;
202+
min-width: 0;
203+
max-width: 200px;
204+
}
205+
206+
.commandsCenter {
207+
order: 0;
208+
margin-left: 0;
209+
flex: 2;
210+
text-align: center;
211+
max-width: none;
212+
}
213+
214+
.commandButton {
215+
margin: 0.25rem;
216+
font-size: 0.875rem;
217+
}
218+
}
219+
120220
@media (min-width: 992px) {
121221
.container {
122222
margin-top: 1.25rem;
@@ -132,15 +232,26 @@
132232

133233
.chatInput {
134234
padding: 0.75rem 1.5rem 1.5rem;
235+
position: relative; /* Override sticky positioning for desktop */
236+
bottom: auto; /* Reset bottom positioning */
237+
margin-top: 0; /* Reset margin */
135238
}
136239

137240
.commandsSplitContainer {
138241
padding-left: 1rem;
242+
flex-wrap: nowrap;
243+
gap: 1rem;
139244
}
140245

141246
.commandsContainer {
142247
padding-left: 0rem;
143248
padding-right: 0rem;
249+
flex-wrap: nowrap;
250+
}
251+
252+
.commandsCenter {
253+
margin-left: 20px;
254+
order: 0;
144255
}
145256

146257
.commandButton {

0 commit comments

Comments
 (0)