swipe media cards on small screen by interim17 · Pull Request #411 · AllenCell/cell-catalog

interim17 · 2026-01-14T00:06:45Z

Problem

Solution

New feature (non-breaking change which adds functionality)

Screenshots (optional):

…talog into fix/tab-swipe

interim17 · 2026-01-14T00:08:01Z

src/components/ImagesAndVideo/ImagePreviewGroup.tsx

+export const PreviewGroup = ({
+    currentIndex,
+    imageItems,
+    mediaItems,
+    previewVisible,
+    setCurrentIndex,
+    setPreviewVisible,
+    setSelectedMedia,
+}: ImagePreviewGroupProps) => {


Moved from ImagesAndVideos

Strictly speaking this component doesn't get re-used so doesn't deserve to be a component, but I was trying to reduce line count and separate concerns in ImagesAndVideo it does get rendered in two places, but is the same in both.

interim17 · 2026-01-14T00:09:12Z

src/components/ImagesAndVideo/ImagesAndVideos.tsx

+import { PreviewGroup } from "./ImagePreviewGroup";
+import { MediaCard } from "./MediaCard";


I pulled the preview component, and MediaCard (along with renderMediaItems() into separate files to make this a little less intimidating to read.

Copilot

Pull request overview

This PR implements swipable media cards for small screens by refactoring the ImagesAndVideos component into a more modular structure. The changes introduce responsive behavior that displays media in a horizontally scrollable card layout on tablet and mobile devices, while maintaining the original layout for larger screens.

Changes:

Refactored ImagesAndVideos component into separate, focused modules (MediaCard, ImagePreviewGroup, and main component)
Added responsive swipable card layout for tablet/mobile viewports with scroll-snap behavior
Updated padding and styling to support the new mobile card experience

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/templates/disease-cell-line.tsx	Updated import path to reflect new component directory structure
src/templates/cell-line.tsx	Updated import path to reflect new component directory structure
src/style/layout.module.css	Changed content padding from 0 to 8px on small screens
src/style/index.sass	Added global overscroll prevention for vertical scrolling
src/style/images-and-videos.module.css	Added extensive mobile/tablet styling for swipable cards and updated media query breakpoints
src/components/ImagesAndVideos.tsx	Removed entire file as part of refactoring into modular components
src/components/ImagesAndVideo/MediaCard.tsx	New component handling individual media card rendering
src/components/ImagesAndVideo/ImagesAndVideos.tsx	New main component with responsive layout logic
src/components/ImagesAndVideo/ImagePreviewGroup.tsx	New component handling image preview functionality

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

src/style/images-and-videos.module.css

+        gap: 20px;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;


src/components/ImagesAndVideo/MediaCard.tsx

+    videoIframe,
+} = require("../../style/images-and-videos.module.css");
+
+interface MobileImageCardProps {


Copilot · 2026-01-20T22:26:52Z

src/components/ImagesAndVideo/ImagesAndVideos.tsx

+                    {mediaItems.map((_item, index) => (
+                        <MediaCard
+                            className={mobileMediaCard}
+                            key={index}
+                            index={index}
+                            title={title}
+                            isMobile={isMobile}
+                            item={mediaItems[index]}


The _item parameter is unused (indicated by the underscore prefix) but then mediaItems[index] is accessed on line 170. Consider removing the underscore and using the item parameter directly instead of re-accessing the array by index.

Suggested change

{mediaItems.map((_item, index) => (

<MediaCard

className={mobileMediaCard}

key={index}

index={index}

title={title}

isMobile={isMobile}

item={mediaItems[index]}

{mediaItems.map((item, index) => (

<MediaCard

className={mobileMediaCard}

key={index}

index={index}

title={title}

isMobile={isMobile}

item={item}

I agree with this

I read this and took a stab at it and found it buggy, but I'll try again.

what was buggy about it? it should be the exact some item right?

Idk what I did last time but it worked this time! Pushed this a couple days agio:
ef492c5

TravisKroeker

approving in anticipation of merging the changes we discussed

netlify · 2026-01-22T18:58:58Z

✅ Deploy Preview for cell-catalog ready!

Name	Link
🔨 Latest commit	`5c3a99a`
🔍 Latest deploy log	https://app.netlify.com/projects/cell-catalog/deploys/698298bbea6494000817ceb2
😎 Deploy Preview	https://deploy-preview-411--cell-catalog.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.

meganrm · 2026-01-26T17:06:36Z

@interim17: checking on this: the description still says "DRAFT" and Travis seems to have asked for changes. Are those things both addressed?

interim17 · 2026-01-29T20:35:26Z

@meganrm yes and those changes were merged

meganrm · 2026-01-30T19:11:50Z

src/components/CellLineTable/index.tsx

this is a nice encapsulation

meganrm · 2026-01-30T19:19:05Z

src/components/ImagesAndVideo/ImagesAndVideos.tsx

+                    {parentalGeneSymbol
+                        ? `${geneSymbol} in WTC-${fluorescentTag}-${parentalGeneSymbol} (${alleleTag}-allelic tag)`
+                        : `${geneSymbol} in WTC-${fluorescentTag} (${alleleTag}-allelic tag)`}


I'm guessing this is how we had this before, but it looks like something that could be a formatting function instead of inline like this

Easy to make one, I think it feels a bit odd to pass that many props to a util so I'm going to define the util above the render in this file.

meganrm

a few small issues otherwise, looks good

…talog into feature/image-swipe

interim17 · 2026-02-04T00:55:29Z

src/components/ImagesAndVideo/ImagesAndVideos.tsx

+                            className={classNames(
+                                mobileMediaCard,
+                                mediaItems.length === 1 && singleImage,
+                            )}


last commit added a couples rules to center and fill the space if there is only one image, it looked funny offset to the left

interim17 added 7 commits January 9, 2026 16:41

add hooks for checking mobile and tablet screen size

91fc316

add swiping buttons for subpage tabs on small screen sizes

3e72819

Merge branch 'main' of https://github.com/allen-cell-animated/cell-ca…

558c92d

…talog into fix/tab-swipe

Merge branch 'main' of https://github.com/allen-cell-animated/cell-ca…

1b07cb3

…talog into fix/tab-swipe

Merge branch 'main' of https://github.com/allen-cell-animated/cell-ca…

5a7b398

…talog into fix/tab-swipe

format imports

354e406

factor out media components for use in swipe cards on small screen

c5a6d05

interim17 commented Jan 14, 2026

View reviewed changes

interim17 added 2 commits January 16, 2026 14:50

fix scroll exposing space behind layout

751c79f

add pading around content on small screens

81ebd83

interim17 requested a review from TravisKroeker January 20, 2026 20:52

interim17 marked this pull request as ready for review January 20, 2026 20:52

interim17 requested a review from Copilot January 20, 2026 22:26

Copilot AI reviewed Jan 20, 2026

View reviewed changes

rename media card props interface

43e70e5

Base automatically changed from fix/tab-swipe to main January 21, 2026 22:53

style mobile card spacing

c837b62

TravisKroeker approved these changes Jan 22, 2026

View reviewed changes

interim17 requested review from meganrm and rugeli January 22, 2026 21:08

meganrm reviewed Jan 30, 2026

View reviewed changes

src/components/CellLineTable/index.tsx

Comment on lines 51 to 52

Copy link

Collaborator

meganrm Jan 30, 2026

Choose a reason for hiding this comment

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

this is a nice encapsulation

meganrm reviewed Jan 30, 2026

View reviewed changes

meganrm requested changes Jan 30, 2026

View reviewed changes

interim17 added 3 commits February 3, 2026 10:12

pull subtitle formatting into util

50757e4

use item directly in props for swipable cards

ef492c5

Merge branch 'main' of https://github.com/allen-cell-animated/cell-ca…

b9ce749

…talog into feature/image-swipe

remove merge artifact

7512093

rugeli approved these changes Feb 3, 2026

View reviewed changes

interim17 requested a review from meganrm February 3, 2026 20:18

make single image card fill the space on mobile

5c3a99a

interim17 commented Feb 4, 2026

View reviewed changes

		import { PreviewGroup } from "./ImagePreviewGroup";
		import { MediaCard } from "./MediaCard";

Conversation

interim17 commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Screenshots (optional):

Uh oh!

interim17 Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

interim17 Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TravisKroeker left a comment

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cell-catalog ready!

Uh oh!

meganrm commented Jan 26, 2026

Uh oh!

interim17 commented Jan 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meganrm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

interim17 commented Jan 14, 2026 •

edited

Loading

interim17 Jan 14, 2026 •

edited

Loading

interim17 Jan 14, 2026 •

edited

Loading

netlify bot commented Jan 22, 2026 •

edited

Loading