diff --git a/browser/data-browser/src/components/forms/AtomicSelectInput.tsx b/browser/data-browser/src/components/forms/AtomicSelectInput.tsx index e6e2fcca6..c1c190210 100644 --- a/browser/data-browser/src/components/forms/AtomicSelectInput.tsx +++ b/browser/data-browser/src/components/forms/AtomicSelectInput.tsx @@ -30,7 +30,7 @@ export function AtomicSelectInput({ }; return ( - + - + ); } +const StyledInputWrapper = styled(InputWrapper)` + min-width: 15ch; +`; + const SelectWrapper = styled.span<{ disabled: boolean }>` width: 100%; padding-inline: 0.2rem; diff --git a/browser/data-browser/src/views/OntologyPage/OntologyPage.tsx b/browser/data-browser/src/views/OntologyPage/OntologyPage.tsx index 97a56ed26..68585d024 100644 --- a/browser/data-browser/src/views/OntologyPage/OntologyPage.tsx +++ b/browser/data-browser/src/views/OntologyPage/OntologyPage.tsx @@ -128,6 +128,12 @@ const FullPageWrapper = styled.div<{ edit: boolean }>` --ontology-graph-ratio: 16/9; } + @container (max-width: 600px) { + grid-template-areas: ${p => + p.edit ? `'title' 'list' 'list'` : `'title' 'graph' 'list'`}; + grid-template-columns: 100%; + } + padding-bottom: 3rem; `; diff --git a/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx b/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx index 9342e578a..02c38fa75 100644 --- a/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx +++ b/browser/data-browser/src/views/OntologyPage/Property/PropertyLineWrite.tsx @@ -49,7 +49,7 @@ export function PropertyLineWrite({ return ( - +