Import from other channels (with search recommendations) - Responsive design issues

[pcenov]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Observed behavior

After the inclusion of the search recommendations when I shrink the page width to less than 750 pixels then the responsiveness is no longer working properly:

responsive.design.mp4

And here's what I am observing if enter a search term:

rd.2.mp4

Expected behavior

The responsive design issues should be fixed. It should be further specified where and how the search recommendations should be displayed in that case.

Steps to reproduce the issue

1. Sign in to Hotfixes with an account with enabled search recommendations
2. Go to a channel and try to import resources from other channels

Additional information

Usage Details

• OS: Windows 11
• Browser: Chrome, Firefox
• URL: https://hotfixes.studio.learningequality.org/en/
• Caused by changes made in: Release v2025.09.29 #5318

[pcenov]

@radinamatic

[pcenov]

In addition to the above if I am signed in as a user without enabled search recommendations, and I start browsing through a channel's content then everything is centered.
As mentioned by Radina what apparently is happening is that the container div for the topic tree of the selected channel in the Import from other channels page seems to be not fully/properly responsive, and has the width unnecessarily constrained - narrower when only first level folders are displayed (or channel has only first level folders), and widening as one navigates further into folders.
This also causes the difference in how the breadcrumbs are displayed: the available space is not fully used, and the first level Channels breadcrumb link is always hidden (it's not when there is the search recommendation column, given the available space).

centered.cards.mp4

[pcenov]

Noticed today one additional issue, which I can report separately if needed: When the search recommendations are enabled and I am at "Import from other channels" and viewing the page in mobile view, then I am seeing the search recommendations while the resources are still loading:

responsiveness.mp4

Ideally in that case we should be showing just the spinner.