#694 Fix ontology viewer not working on mobile

atomicdata-dev · Nov 7, 2023 · 848ac1e · 848ac1e
1 parent c22e410
commit 848ac1e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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 (
-    <InputWrapper>
+    <StyledInputWrapper>
       <SelectWrapper disabled={!!props.disabled}>
         <Select {...props} onChange={handleChange} value={value as string}>
           {options.map(option => (
@@ -40,10 +40,14 @@ export function AtomicSelectInput({
           ))}
         </Select>
       </SelectWrapper>
-    </InputWrapper>
+    </StyledInputWrapper>
   );
 }
 
+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
@@ -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
@@ -49,7 +49,7 @@ export function PropertyLineWrite({
 
   return (
     <ListItem>
-      <Row center>
+      <Row center wrapItems>
         <InputSwitcher
           commit
           required