Skip to content

Commit d870248

Browse files
committed
Make map generation controls responsive / connstrained to fit beside the map
1 parent f076121 commit d870248

1 file changed

Lines changed: 69 additions & 0 deletions

File tree

src/style/main.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,8 @@ button:active {
144144
.layer-controls {
145145
flex: 0 0 300px;
146146
min-width: 300px;
147+
max-width: 300px;
148+
overflow: hidden;
147149
}
148150

149151
.layer-viewer-container {
@@ -256,6 +258,11 @@ button:active {
256258
background-color: white;
257259
cursor: pointer;
258260
flex: 1;
261+
min-width: 0;
262+
max-width: 100%;
263+
overflow: hidden;
264+
text-overflow: ellipsis;
265+
white-space: nowrap;
259266
}
260267

261268
.style-select:focus {
@@ -293,6 +300,11 @@ button:active {
293300
background-color: white;
294301
cursor: pointer;
295302
flex: 1;
303+
min-width: 0;
304+
max-width: 100%;
305+
overflow: hidden;
306+
text-overflow: ellipsis;
307+
white-space: nowrap;
296308
}
297309

298310
.dimension-select:focus {
@@ -307,17 +319,74 @@ button:active {
307319
font-size: 0.85rem;
308320
background-color: white;
309321
cursor: pointer;
322+
flex: 1;
323+
min-width: 0;
324+
max-width: 100%;
325+
overflow: hidden;
326+
text-overflow: ellipsis;
327+
white-space: nowrap;
310328
}
311329

312330
.format-select:focus {
313331
outline: none;
314332
border-color: #3498db;
315333
}
316334

335+
.projection-selector {
336+
display: flex;
337+
align-items: center;
338+
gap: 0.5rem;
339+
margin-bottom: 0.5rem;
340+
font-size: 0.85rem;
341+
}
342+
343+
.projection-selector label {
344+
color: #666;
345+
font-weight: normal;
346+
margin: 0;
347+
}
348+
349+
.projection-select {
350+
padding: 0.25rem 0.5rem;
351+
border: 1px solid #ddd;
352+
border-radius: 3px;
353+
font-size: 0.85rem;
354+
background-color: white;
355+
cursor: pointer;
356+
flex: 1;
357+
min-width: 0;
358+
max-width: 100%;
359+
overflow: hidden;
360+
text-overflow: ellipsis;
361+
white-space: nowrap;
362+
}
363+
364+
.projection-select:focus {
365+
outline: none;
366+
border-color: #3498db;
367+
}
368+
369+
.format-selector {
370+
display: flex;
371+
align-items: center;
372+
gap: 0.5rem;
373+
margin-bottom: 0.5rem;
374+
font-size: 0.85rem;
375+
}
376+
377+
.format-selector label {
378+
color: #666;
379+
font-weight: normal;
380+
margin: 0;
381+
}
382+
317383
.layer-name {
318384
font-size: 0.85rem;
319385
color: #666;
320386
margin-bottom: 0.75rem;
387+
word-wrap: break-word;
388+
overflow-wrap: break-word;
389+
max-width: 100%;
321390
}
322391

323392
.layer-preview {

0 commit comments

Comments
 (0)