Skip to content

Conversation

@pkalita-lbl
Copy link
Collaborator

Fixes #1895

These changes make the maximum height of the study image on the study details page dynamic. There are two cases:

  1. On small screens, the "main info column" (which contains the study name, description, and data summary) and the "image column" are stacked (both width: 100%). The maximum height of the image is capped at 300px by setting the max-height prop on the <v-img> component.
  2. On medium and larger screens, the main info column and image column are displayed side-by-side. In this case we want the height of both to only be dictated by the content of the main info column. This is accomplished by making the image column absolutely positioned and therefore doesn't contribute to the height of the row containing both columns. In this case the max-height prop of the <v-img> component is not set so that it can fill the maximum allowed space.

The useDisplay composable from Vuetify is used to make the small vs medium or larger screen size determination. Previously we used Vuetify's <v-row> and <v-col> components, but with the amount of customization needed here it was easier to directly implement what was needed with CSS classes instead of working around the default behavior of those components.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR implements dynamic max-height behavior for study images on the study details page to improve responsive layout. The implementation uses Vuetify's useDisplay composable to detect screen size and apply appropriate styling.

Key Changes:

  • Replaced Vuetify's v-row/v-col grid components with custom CSS classes for more precise layout control
  • Added conditional max-height (300px) for images on small screens, while allowing images to fill available space on larger screens
  • Implemented absolute positioning for the image column on medium+ screens to ensure the main content column dictates row height

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Collaborator

@eecavanna eecavanna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disclaimer: I only skimmed it (on my iPhone). I'm OK with it being merged into main. Thanks for implementing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Data portal - limit consortium logo size

3 participants