fix: 🐛 ↕️ 📱height now matches mobile height

[matthieujacq]

Issue

#1320

Description

The UI now fit the screen's height on smartphones.

Solution

Creation of a new utility class .h-fill-available.
Uses cqh (container query height) supported by chrome or svh (for safari). (see: tailwindlabs/tailwindcss#4515 (comment))

Screenshots (if appropriate):

Before

After

[vercel]

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

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	Oct 4, 2023 9:53am
quivr-strapi	✅ Ready (Inspect)	Visit Preview	Oct 4, 2023 9:53am
quivrapp	✅ Ready (Inspect)	Visit Preview	Oct 4, 2023 9:53am

[github-actions]

Risk Level 2 - /home/runner/work/quivr/quivr/frontend/lib/components/Sidebar/Sidebar.tsx

The changes in this file are also related to styling, but there's a bit more logic involved. The drag and onDragEnd properties are being used to allow the sidebar to be dragged and to toggle its open state based on the drag direction. This could potentially cause issues if not implemented correctly, but without more context, it's hard to say for sure. The added line of code is a string template for a CSS class name, which doesn't seem to have any potential bugs or performance issues. However, the onDragEnd function could be extracted to a separate function for better readability and testability. For example:

const handleDragEnd = (event, info) => {
  if (info.offset.x > 100 && !open) {
    setOpen(true);
  } else if (info.offset.x < -100 && open) {
    setOpen(false);
  }
};

// then in the component
onDragEnd={handleDragEnd}

This way, the drag end logic is separated from the component, making it easier to read and test.

---

📁💡🐛

---

Powered by Code Review GPT