fix(ui): layout on smaller window sizes (#2477)

infrahq · Jul 4, 2022 · 9e059f0 · 9e059f0
1 parent c90d39b
commit 9e059f0
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
@@ -55,7 +55,7 @@ function Layout({ children }) {
   }
 
   return (
-    <div className='flex h-full'>
+    <div className='flex h-full min-w-[800px]'>
       <nav className='flex w-40 flex-none flex-col lg:w-48 xl:w-56'>
         <div className='lg:my-18 mt-6 mb-10 flex flex-shrink-0 select-none items-center px-5'>
           <Link href='/'>

diff --git a/ui/components/sidebar.js b/ui/components/sidebar.js
@@ -16,7 +16,7 @@ export default function Sidebar({
   return (
     <aside
       ref={ref}
-      className='my-0 flex h-full w-full max-w-sm flex-col overflow-x-visible overflow-y-scroll pl-8 pr-6 lg:max-w-md lg:pl-12 xl:max-w-lg xl:pl-16'
+      className='my-0 flex h-full w-full min-w-[18em] max-w-sm flex-col overflow-x-visible overflow-y-scroll pl-8 pr-6 lg:max-w-md lg:pl-12 xl:max-w-lg xl:pl-16'
     >
       <header className='flex-start sticky top-0 z-10 flex items-center justify-between bg-black py-3'>
         <div className='mr-3 flex-none'>

diff --git a/ui/pages/destinations/index.js b/ui/pages/destinations/index.js
@@ -247,6 +247,7 @@ const columns = [
   {
     Header: 'Name',
     accessor: 'name',
+    width: '67%',
     Cell: ({ row, value }) => {
       return (
         <div className='flex items-center py-2'>
@@ -289,7 +290,7 @@ const columns = [
   {
     Header: 'Kind',
     accessor: v => v,
-    width: '25%',
+    width: '33%',
     Cell: ({ value }) => (
       <span className='rounded bg-gray-800 px-2 py-0.5 text-gray-400'>
         {value.kind}
@@ -333,7 +334,7 @@ export default function Destinations() {
       </Head>
       {!loading && (
         <div className='flex h-full flex-1'>
-          <div className='flex flex-1 flex-col space-y-4'>
+          <div className='flex min-w-[20em] flex-1 flex-col space-y-4'>
             <PageHeader
               header='Clusters'
               buttonHref={admin && '/destinations/add'}

diff --git a/ui/pages/users/index.js b/ui/pages/users/index.js
@@ -18,6 +18,7 @@ import RoleSelect from '../../components/role-select'
 const columns = [
   {
     Header: 'Name',
+    width: '50%',
     accessor: u => u,
     Cell: ({ value: user }) => (
       <div className='flex items-center py-1.5'>
@@ -30,6 +31,7 @@ const columns = [
   },
   {
     Header: 'Last Seen',
+    width: '25%',
     accessor: u => u,
     Cell: ({ value: user }) => (
       <div className='text-name text-gray-400'>
@@ -39,6 +41,7 @@ const columns = [
   },
   {
     Header: 'Added',
+    width: '25%',
     accessor: u => u,
     Cell: ({ value: user }) => (
       <div className='text-name text-gray-400'>