diff --git a/src/App.module.css b/src/App.module.css index a264b81f7..d304320bd 100644 --- a/src/App.module.css +++ b/src/App.module.css @@ -123,9 +123,10 @@ input[name=hideControls]:checked ~ .canvas { .modalMain { position:fixed; background: white; - flex: 1 1 auto; + flex: 1; display: flex; flex-direction: column; + flex-wrap: nowrap; border: 1px solid black; padding: 1rem; margin: 1rem; @@ -136,9 +137,10 @@ input[name=hideControls]:checked ~ .canvas { transform: translate(-50%,-50%); } + .modalMain span { display: flex; - flex-flow: row wrap; + flex-flow: row no-wrap; align-items: center; } @@ -275,22 +277,31 @@ input[name=hideControls]:checked ~ .canvas { .uploadContainer { display: flex; + flex: 1; + flex-wrap: nowrap; align-items: center; - flex-flow: row no-wrap; + align-self: flex-start; + padding-right: 0.5em; } .fileUpload { flex: 1; display: flex; - align-items: center + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; } .fileUpload label { flex: 0; - margin-right: 0; + margin-right: 2em; } .fileUpload span { - flex: 1 0 auto; - flex-direction: row no-wrap; + white-space: nowrap; + flex: 1 1 auto; + background-color: #DCDCDC; + flex-wrap: nowrap !important; + padding: 0.25em 2em; } \ No newline at end of file diff --git a/src/features/dataset-controls/DatasetControls.module.css b/src/features/dataset-controls/DatasetControls.module.css index 124e33368..60eb92229 100644 --- a/src/features/dataset-controls/DatasetControls.module.css +++ b/src/features/dataset-controls/DatasetControls.module.css @@ -4,11 +4,21 @@ margin: 0.5rem; } -.selectorContainer, .uploadContainer { +.selectorContainer{ display: flex; + flex: 1; + flex-wrap: nowrap; align-items: center; } +.uploadContainer { + display: flex; + flex: 1; + flex-wrap: nowrap; + align-items: center; + align-self: flex-start; +} + .selector { flex: 1; } @@ -21,16 +31,23 @@ .fileUpload { flex: 1; display: flex; - align-items: center + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; } .fileUpload label { flex: 0; - margin-right: 0; + margin-right: 2em; } .fileUpload span { - flex: 1; + white-space: nowrap; + flex: 1 1 auto; + background-color: #DCDCDC; + flex-wrap: nowrap; + padding: 0.25em 2em; } .label { @@ -116,7 +133,7 @@ .modalMain { position:fixed; background: white; - flex: 0; + flex: 1; display: flex; flex-direction: column; border: 1px solid black; @@ -131,7 +148,7 @@ .modalMain span { display: flex; - flex-flow: row wrap; + flex-flow: row nowrap; align-items: center; justify-content: space-between; }