Mobile and tablet layouts #2087

benjaminleonard · 2024-03-21T14:25:03Z

Long overdue, but not as painful as I had expected. There are definitely refinements to be made to mobile layouts, but this is a good start. Feels a little magic to create an instance so easily and connect to it from your phone.

At some point we'll want to think about the actions that people are more likely to take on mobile devices and optimise for that. I'm thinking about dashboards, fault management, checking and increasing utilization – aka someone has pinged me about something and as an operator I need to check it out.

Some things are not disabled but unlikely to be usable on a mobile device. For example uploading an image – props to the first person to successfully upload a raw bootable image and boot from it.

vercel · 2024-03-21T14:25:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Sep 16, 2024 8:15pm

benjaminleonard · 2024-03-21T14:26:50Z

Priority for feedback on this PR will be ensuring we haven't regressed the desktop version.

benjaminleonard · 2024-03-21T14:27:23Z

app/components/EquivalentCliCommand.tsx

+      <Button
+        variant="ghost"
+        size="sm"
+        className="md-:hidden"


Can be disabled universally I think. Users will not be using the CLI from their phones.

benjaminleonard · 2024-03-21T14:28:34Z

app/components/MswBanner.tsx

@@ -29,10 +29,18 @@ function ExternalLink({ href, children }: { href: string; children: ReactNode })
 export function MswBanner() {
  const [isOpen, setIsOpen] = useState(false)
  const closeModal = () => setIsOpen(false)
+
+  useEffect(() => {
+    document.body.classList.add('msw-banner')


Perhaps convoluted but only appears on the preview so not too concerned about it. We use it to add extra padding for the banner at the bottom. Banner has been moved to the bottom, mostly because it breaks less stuff in the navigation.

benjaminleonard · 2024-03-21T14:29:58Z

app/components/Sidebar.tsx

+      {transitions(
+        ({ x }, item) =>
+          item && (
+            <Dialog.Root


Feels slightly weird to be using a dialog here but it means we can use the same sidebar across both layouts. If there's a place that needs a bit more of a discerning eye it's probably here and the state logic to make sure it's bulletproof.

benjaminleonard · 2024-03-21T14:30:35Z

app/components/Sidebar.tsx

+  )
+}
+
+export const ProfileLinks = () => {


Adds profile info into the navigation, hidden on desktop because it's visible in the nav.

benjaminleonard · 2024-03-21T14:30:52Z

app/components/Sidebar.tsx

    </div>
  )
 }

+const SignOut16Icon = () => (


I'll move this into the design system

benjaminleonard · 2024-03-21T14:31:12Z

app/components/TopBar.tsx

  )
 }
+
+const Menu12Icon = ({ className }: { className: string }) => (


Likewise, will also add to the design system

benjaminleonard · 2024-03-21T14:33:22Z

app/hooks/use-menu-state.ts

+
+  return useStore(
+    (store) => ({
+      isOpen: size.width >= 1024 ? true : store.isOpen,


I tend to not like to target window sizes with javascript, but this felt like the easiest option. Forces the sidebar to be open on larger screen sizes since it's always visible.

benjaminleonard · 2024-03-21T14:35:44Z

app/layouts/helpers.tsx

-export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[60px,1fr]`
+export const PageContainer = classed.div`h-full pt-[var(--navigation-height)] [overscroll-behavior-y:none]`


Switched back to good old salt of the earth non-grid CSS. It was a great solution but we ran into some awkward browser behaviour where a forced scroll would mess up the layout irredeemably.

benjaminleonard · 2024-03-21T14:37:07Z

app/ui/styles/index.css

@@ -44,11 +44,34 @@

 :root {
  --content-gutter: 2.5rem;
+  --sidebar-width: 14.25rem;
+  --navigation-height: 3.75rem;


We should do more of this stuff I think

benjaminleonard · 2024-03-21T14:38:11Z

tailwind.config.js

-        'xl-': { max: '1535px' },
-        'lg-': { max: '1279px' },
-        'md-': { max: '1023px' },
-        'sm-': { max: '767px' },
        'sm+': { min: '640px' },


I've never used this - / + for responsive Tailwind before and I must say I am a fan, means we're not forced to class them mobile first.

benjaminleonard · 2024-03-21T14:38:32Z

test/e2e/scroll-restore.e2e.ts

@@ -8,13 +8,13 @@
 import { expect, test, type Page } from './utils'

 async function expectScrollTop(page: Page, expected: number) {
-  const container = page.getByTestId('scroll-container')
+  const container = page.locator('#content_pane')


I was adding an ID to content pane already, so we no longer need the test-id

david-crespo · 2024-03-21T14:50:20Z

Obviously we need to test it properly, but I just tried it on my phone and it feels incredible.

benjaminleonard · 2024-03-21T16:28:45Z

Refactoring the dialog out on desktop, its causing issues with side modals.

tailwind.config.js

benjaminleonard · 2024-03-27T12:47:10Z

No idea why this test is suddenly failing and it passes on my local machine.

david-crespo · 2024-03-27T21:27:54Z

Couple things.

I'm not sure why it suddenly became reproducible locally after I merged main. Could be that I re-ran npm install
The failure here was simply that the element in was very slightly in the viewport (not sure why that changed). The error message from playwright about that happens to be very opaque.
The fix is to scroll 5px farther.

david-crespo · 2024-04-03T18:49:01Z

app/layouts/helpers.tsx

        <SkipLinkTarget />
        <main className="[&>*]:gutter">
          <Outlet />
        </main>
      </div>
-      <div className="sticky bottom-0 flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="sticky bottom-0 z-popover flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">


this might conflict with actual popovers

This seems to be fine because all of the popovers are in portals and therefore appears later in the DOM. I could add a z-bottomBar or something that is z-index: 5; (popover is currently 10).

benjaminleonard · 2024-04-17T08:38:55Z

Would love to get this into release 8 – in part because it touches so many files the longer it sits the more painful any merge conflicts are going to be.

david-crespo · 2024-05-22T19:04:20Z

This is beautiful work but because it's hard to say it's a priority and it has so many moving parts (and is getting more and more out of date), I think we'll want to break it into chunks (as far as that's possible) and redo each one as a new PR on top of main.

benjaminleonard · 2024-05-22T19:34:57Z

The important part here is fixing the parts that break on smaller desktop sizes currently. And removing the grid layout is necessary I think for fixing the scrolling bug on the instance create (and other screens) – which is probably the most invasive change.

Happy for this to be split out, though I'd be doubtful that would be less work than spending a bit of time testing this. If we deployed this as early on the dogfood cycle before the next release, and did some extra checks on our end then the scope for harm is pretty low. Especially since our e2e coverage is pretty good.

david-crespo · 2024-06-28T20:45:40Z

I merged main and it all seems to work, so we're in better shape than I expected. Here's one easy thing to fix — needs a max-w or a slightly smaller hard width.

david-crespo · 2024-09-16T20:22:14Z

app/components/TopBar.tsx

  return (
-    <>
-      <div className="flex items-center border-b border-r px-3 border-secondary">
+    <div className="fixed top-0 z-topBar col-span-2 grid h-[var(--navigation-height)] w-full grid-cols-[min-content,auto] bg-default lg+:grid-cols-[var(--sidebar-width),auto]">


this stuff freaks me out. wonder if we can drop the grid cols thing

benjaminleonard added 7 commits March 20, 2024 13:32

First pass at mobile styles

1a71958

Switch away from grid and improvements

55bba19

Update Tabs.css

e55af0c

We can use the ID now

2dc1fda

Tweak msw banner

fe6b9ba

More tablet and mobile improvements

6d83a8d

Merge branch 'main' into responsiveness

4a4c4d8

benjaminleonard commented Mar 21, 2024

View reviewed changes

benjaminleonard requested review from charliepark and david-crespo March 21, 2024 14:38

benjaminleonard added 2 commits March 21, 2024 14:39

Licenses

ea4caa0

Add missing ID

05dc533

vercel bot deployed to Preview March 21, 2024 14:41 View deployment

Fix sidebar issues

0c6cd0d

vercel bot deployed to Preview March 21, 2024 17:19 View deployment

Profile link tweaks

a6daccb

vercel bot deployed to Preview March 22, 2024 15:04 View deployment

david-crespo reviewed Mar 26, 2024

View reviewed changes

tailwind.config.js Show resolved Hide resolved

Login page inbetween breakpoint fixes

c8945db

vercel bot deployed to Preview March 27, 2024 11:57 View deployment

Bump commit

dc50b81

vercel bot deployed to Preview March 27, 2024 12:36 View deployment

Merge branch 'main' into responsiveness

2bee8fd

vercel bot deployed to Preview March 27, 2024 21:21 View deployment

let's just uh scroll a little farther

e14fbfb

vercel bot deployed to Preview March 27, 2024 21:25 View deployment

Merge main into responsiveness

c22e049

vercel bot deployed to Preview April 2, 2024 22:38 View deployment

david-crespo reviewed Apr 3, 2024

View reviewed changes

benjaminleonard mentioned this pull request Apr 8, 2024

Scroll bug on accordion open on narrow screen #2069

Open

david-crespo added 2 commits June 28, 2024 15:34

Merge branch 'main' into responsiveness

1701b35

format, lint

87a1049

vercel bot deployed to Preview June 28, 2024 20:38 View deployment

david-crespo mentioned this pull request Jul 17, 2024

Remove truncation on topbar dropdown #2329

Merged

Merge branch 'main' into responsiveness

2102b21

vercel bot deployed to Preview September 16, 2024 20:13 View deployment

Bot commit: format with prettier

75dc134

vercel bot deployed to Preview September 16, 2024 20:15 View deployment

david-crespo reviewed Sep 16, 2024

View reviewed changes

david-crespo mentioned this pull request Sep 17, 2024

Scroll entire page instead of content pane #2450

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mobile and tablet layouts #2087

Mobile and tablet layouts #2087

benjaminleonard commented Mar 21, 2024 •

edited

Loading

vercel bot commented Mar 21, 2024 •

edited

Loading

benjaminleonard commented Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

benjaminleonard Mar 21, 2024

david-crespo commented Mar 21, 2024

benjaminleonard commented Mar 21, 2024

benjaminleonard commented Mar 27, 2024

david-crespo commented Mar 27, 2024

david-crespo Apr 3, 2024

benjaminleonard Apr 9, 2024

benjaminleonard commented Apr 17, 2024

david-crespo commented May 22, 2024

benjaminleonard commented May 22, 2024

david-crespo commented Jun 28, 2024

david-crespo Sep 16, 2024

		export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[60px,1fr]`
		export const PageContainer = classed.div`h-full pt-[var(--navigation-height)] [overscroll-behavior-y:none]`

Mobile and tablet layouts #2087

Are you sure you want to change the base?

Mobile and tablet layouts #2087

Conversation

benjaminleonard commented Mar 21, 2024 • edited Loading

vercel bot commented Mar 21, 2024 • edited Loading

benjaminleonard commented Mar 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

david-crespo commented Mar 21, 2024

benjaminleonard commented Mar 21, 2024

benjaminleonard commented Mar 27, 2024

david-crespo commented Mar 27, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjaminleonard commented Apr 17, 2024

david-crespo commented May 22, 2024

benjaminleonard commented May 22, 2024

david-crespo commented Jun 28, 2024

Choose a reason for hiding this comment

benjaminleonard commented Mar 21, 2024 •

edited

Loading

vercel bot commented Mar 21, 2024 •

edited

Loading