[ENH] Fix dataset title to span full width in result card.

[gmarav05]

• Closes Allow longer dataset names to overflow horizontally into rest of dataset result card #727

Changes proposed in this pull request:

• Changed the dataset result card layout from a single-row to a two-row grid layout.

• Row 1 Dataset name now spans the full width of the card 12 columns now.

• Row 2 Authors, icons, subject count, and imaging modalities are below.

• Removed the 39-character truncation on dataset names and names now uses CSS text-overflow when needed.

• Updated DatasetInfoColumn to no longer render the dataset name (moved to ResultCard)

Before

Dataset names were truncated after 39 characters and shared horizontal space with other card content.

After

Dataset names use the full card width, it makes long descriptive names easier to read.

Checklist

This section is for the PR reviewer

• PR has an interpretable title with a prefix ([ENH], [FIX], [REF], [TST], [CI], [MNT], [INF], [MODEL], [DOC]) (see our Contributing Guidelines for more info)
• PR has a label for the release changelog or skip-release (to be applied by maintainers only)
• PR links to GitHub issue with mention Closes #XXXX
• Tests pass
• Checks pass
• If the PR changes the participant-level and/or the dataset-level result file, the query-tool-results files in the neurobagel_examples repo have been regenerated

For new features:

• Tests have been added

For bug fixes:

• There is at least one test that would fail under the original bug conditions.

Summary by Sourcery

Update dataset result card layout to give the dataset title full-width prominence and adjust surrounding content accordingly.

New Features:

• Display the dataset name as a full-width title row in the result card with tooltip-supported truncation via CSS ellipsis.

Enhancements:

• Reorganize result card content into a two-row grid separating the dataset title from authors and metadata.
• Simplify DatasetInfoColumn by removing responsibility for rendering the dataset name.
• Increase vertical spacing between result cards in the scrollable results container for clearer separation.

[netlify]

✅ Deploy Preview for neurobagel-query ready!

Name	Link
🔨 Latest commit	5f2a6b5
🔍 Latest deploy log	https://app.netlify.com/projects/neurobagel-query/deploys/699076332e9f220008f1bff8
😎 Deploy Preview	https://deploy-preview-738--neurobagel-query.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sourcery-ai]

Reviewer's Guide

Refactors the dataset result card layout so the dataset title occupies a full-width first row with ellipsis-based overflow, while secondary metadata stays below, and removes name rendering from DatasetInfoColumn to centralize it in ResultCard and adjust vertical spacing between cards.

Class diagram for updated ResultCard and DatasetInfoColumn components

classDiagram
  class ResultCard {
    +string datasetUuid
    +string datasetName
    +string nodeName
    +boolean recordsProtected
    +boolean checked
    +string[] authors
    +string or null homepage
    +string or null repositoryUrl
    +string or null license
    +string or null ethicsApproval
    +string or null ethicsApprovalIdentifier
    +string[] imagingModalities
    +number subjectCount
    +boolean hasPhenotypicData
    +boolean hasImagingData
    +boolean hasGeneticData
    +function onCheckboxChange(id)
    -boolean isExpanded
    +render()
  }

  class DatasetInfoColumn {
    +string datasetUuid
    +boolean checked
    +string[] authors
    +string or null homepage
    +string or null repositoryUrl
    +string or null license
    +string or null ethicsApproval
    +string or null ethicsApprovalIdentifier
    +string[] imagingModalities
    +number subjectCount
    +boolean hasPhenotypicData
    +boolean hasImagingData
    +boolean hasGeneticData
    +function onCheckboxChange(id)
    +render()
  }

  ResultCard --> DatasetInfoColumn : renders

Loading

File-Level Changes

Change	Details	Files
Reworked ResultCard layout so the dataset name is rendered as a full-width first row with proper overflow handling, and secondary dataset info is on a second row.	Changed the card content grid from a single-row layout to a two-row, 12-column grid structure. Added a full-width (12-column) Typography element for the dataset name, wrapped in a Tooltip, with CSS overflow, text-overflow ellipsis, and nowrap styling instead of manual string truncation. Adjusted the DatasetInfoColumn container to occupy 5 columns and vertically center its content to align with the new title row.	src/components/ResultCard/ResultCard.tsx
Simplified DatasetInfoColumn to no longer accept or render the dataset name, leaving it responsible only for checkbox and secondary metadata.	Removed the datasetName prop from the DatasetInfoColumn props interface and its destructuring. Deleted the dataset name Tooltip and Typography block that previously truncated names to 39 characters. Left authors and other metadata rendering unchanged so they appear under the title in the new layout.	src/components/ResultCard/DatasetInfoColumn.tsx
Adjusted vertical spacing between result cards in the scrollable result list to better match the new card layout.	Increased the vertical spacing between cards in the results container from a tight spacing to a larger gap while keeping the same scrollable height.	src/components/ResultContainer.tsx

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#727	Update the dataset result card layout so that the dataset name occupies the full width of the top row of the card, with other metadata (authors, subjects, icons) moved to a row below and top-aligned under the title.	✅
#727	Allow longer dataset names to be displayed without the current hard character cutoff, only truncating visually when they exceed the available horizontal space.	✅

Possibly linked issues

• Allow longer dataset names to overflow horizontally into rest of dataset result card #727: PR implements the issue’s requested card layout, giving dataset names full-width display with CSS overflow handling.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

We've reviewed this pull request using the Sourcery rules engine