fix(formulus): make tables responsive on small screens

[allennakalema06-web]

Summary

Fixes #921.

Makes the Formulus Observations and Forms tables more usable on small screens by responsively hiding secondary columns instead of requiring horizontal scrolling.

Changes

• Added a 600px responsive breakpoint using 'useWindowDimensions'.
• Observations table:
  • Keeps Form, Created, and Sync visible on narrow screens.
  • Hides Author and ID below 600px.
• Forms table:
  • Keeps the form name visible on narrow screens.
  • Hides the observation count below 600px.
  • Keeps the New action as a compact icon-only control.
  • Hides the wide New Observation header label on narrow screens.
• Replaced fixed column widths in the Forms table with flexible sizing for wider layouts.

Testing

• 'pnpm run format:check'
• 'pnpm run lint'
• 'pnpm test --runInBand' - 43 test suites, 266 tests passed
• 'git diff --check'

Notes

The responsive breakpoint is below 600px.

Manual Android device testing was not performed because an Android development environment is not currently configured.

[najuna-brian]

Hello @allennakalema06-web,
Thanks for this PR.
Can you please comment on the issue requesting it to be assigned to you

[Mishael-2584]

Thanks for this — nice fix, and the flex-based column resizing is
the right approach (better than the old fixed-width columns).
useWindowDimensions() is also the correct choice here since it
updates on rotation.

Two small things before merge, both explained inline.

[IamLRBA]

Thanks for the initiative @allennakalema06-web and the changes look mostly good.
My only pointer is to also make use of the Packages folder as that's where we defined the tokens to be used.

Just like @Mishael-2584 pointed out, our breakpoint.sm = 640px, in packages/tokens, so it'd be great if the hook used that token instead of the hardcoded 600.

The packages folder also has documentations on how to build and use the tokens.
It's really easy and fun to use them 😁🔥🔥

[allennakalema06-web]

Thanks @Mishael-2584 and @IamLRBA for the feedback!

I've updated the implementation to move the duplicated narrow-screen logic into a shared 'useIsNarrowScreen()' hook under 'formulus/src/hooks/'. The hook now uses the existing 'breakpoint.sm' design token (640px) instead of the hardcoded 600px value.

I also confirmed that the Author and Observation ID hidden on narrow screens are still available on the Observation Detail screen when a user taps an observation row, so that information isn't lost.

I ran formatting, linting, git diff --check, and the full test suite after the changes, all 43 test suites and 266 tests passed.

Thanks again for pointing me toward the shared tokens and hook approach!

[r0ssing]

Look good! Thanks @allennakalema06-web