Skip to content

Fix: widget page two-column layout on small screens #540 #838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YuvikaR wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: widget page two-column layout on small screens #540 #838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af7403b
Fix: widget page two-column layout on small screens
YuvikaR Feb 27, 2026
2de7b43
Update the logos for the demo links
YuvikaR Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
287 changes: 224 additions & 63 deletions _sass/components/_widgets.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,262 @@
// Mobile-first responsive styling for widget tabs

.jupyter-widget-header {
display: flex;
flex-flow: row;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 16px 0;
}

.jupyter-widget-header h2 {
display: inline;

@media (max-width: 480px) {
flex-direction: column;
align-items: flex-start;
gap: 12px;

> span:last-child {
align-self: flex-end;
}
}

h2 {
display: inline;
}
}

.img-scaling {
height: 32px;
vertical-align: top;

@media (max-width: 480px) {
height: 28px;
}
}

.gallery-title {
font-size: 32px;
height: 32px;
line-height: 32px;

@media (max-width: 768px) {
font-size: 26px;
}

@media (max-width: 480px) {
font-size: 22px;
}
}

.support-paragraph {
font-size: 15px;
line-height: 1.5;
text-align: center;
max-width: 630px;
margin: 0 auto 16px auto;
font-size: 15px;
line-height: 1.5;
text-align: center;
max-width: 630px;
margin: 0 auto 16px auto;

@media (max-width: 768px) {
padding: 0 20px;
font-size: 14px;
}
}

.section-header {
margin: 12px auto 8px;
text-align: center;
margin: 12px auto 8px;
text-align: center;
}

.section-icon {
display: block;
margin: 2em auto 0 auto;
max-width: 60px;
max-height: 60px;
}

.tabs-left {
display: flex;
}

.tab-content {
lex-shrink: 0;
flex-grow: 1;
display: block;
margin: 2em auto 0 auto;
max-width: 60px;
max-height: 60px;
}

.tabs-left > .nav-tabs {
border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}

.tab-content > .active,
.pill-content > .active {
display: block;
margin-bottom: 26px;
margin-top: 26px;
min-height: 1100px;
// Responsive tabs - fixes the two-column layout on mobile
.tabbable.tabs-left {
display: flex;

@media (max-width: 991px) {
flex-direction: column;
}
}

.tabs-left > .nav-tabs > li {
float: none;
// Tab navigation
.tabbable.tabs-left > .nav-tabs {
border-bottom: 0;
border-right: 1px solid #ddd;
flex: 0 0 240px; // Fixed width on desktop
margin-right: 20px;

@media (max-width: 991px) {
flex: none;
width: 100%;
border-right: 0;
border-bottom: 1px solid #ddd;
margin-right: 0;
margin-bottom: 20px;
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 1px; // Prevent cutting off focus ring
}

> li {
float: none;
margin-bottom: 2px;

@media (max-width: 991px) {
float: left;
margin-bottom: 0;
margin-right: 2px;
flex: 0 0 auto;
}

> a {
display: block;
padding: 10px 15px;
border-radius: 4px 0 0 4px;
margin-right: -1px;
border: 1px solid transparent;
white-space: normal;
min-width: 200px;

@media (max-width: 991px) {
min-width: auto;
border-radius: 4px 4px 0 0;
margin-right: 0;
padding: 10px 12px;
white-space: nowrap;
}

@media (max-width: 480px) {
padding: 8px 10px;
font-size: 14px;
}

small {
display: block;
font-size: 12px;
color: #6c757d;
margin-top: 2px;

@media (max-width: 991px) {
display: none; // Hide descriptions on mobile to save space
}
}

&:hover,
&:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
text-decoration: none;
}

&.active {
border-color: #ddd transparent #ddd #ddd;
background-color: #fff;

@media (max-width: 991px) {
border-color: #ddd #ddd transparent #ddd;
}

small {
color: #495057;
}
}
}
}
}

.tabs-left > .nav-tabs > li > a{
margin-bottom: 3px;
margin-right: 0;
min-width: 200px;
// Tab content area
.tabbable.tabs-left .tab-content {
flex: 1;
min-width: 0; // Prevents flex overflow issues

> .tab-pane {
display: none;

&.active {
display: block;
min-height: 1100px;

@media (max-width: 991px) {
min-height: auto;
padding: 20px 0;
}
}
}

// Code block responsiveness
pre.highlight {
@media (max-width: 768px) {
font-size: 13px;
white-space: pre-wrap;
word-break: break-all;
overflow-x: auto;
}
}

// Installation instructions
h3 {
@media (max-width: 768px) {
font-size: 18px;
margin-top: 24px;
}
}

p {
@media (max-width: 768px) {
font-size: 14px;
}
}

// Widget container responsiveness
.jupyter-widget-view,
.widget-subarea {
@media (max-width: 768px) {
max-width: 100%;
overflow-x: auto;
}
}
}

.tabs-left > .nav-tabs {
border-right: 1px solid #ddd;
float: left;
height: 1100px;
margin-right: 19px;
// Binder and GitHub icons section
.jupyter-widget-header > span:last-child {
display: flex;
gap: 8px;

@media (max-width: 480px) {
gap: 6px;
}

a {
display: inline-block;
transition: opacity 0.2s;

&:hover {
opacity: 0.8;
}
}
}

.tabs-left > .nav-tabs > li > a {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
margin-right: -1px;
// Responsive table styling for any included tables
table {
@media (max-width: 768px) {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
// Fix for embedded widgets
.jupyter-widgets {
@media (max-width: 768px) {
max-width: 100% !important;
}
}

.tabs-left > .nav-tabs a.active {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
// Ensure iframes (like maps) are responsive
iframe {
max-width: 100%;
}
Binary file added assets/try/Jupyter_notebook.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/try/labs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions try.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@
application_boxes:
- title: JupyterLab
description: The latest web-based interactive development environment
src: try/jupyter.png
src: try/labs.png
alt: Jupyter logo - Launch JupyterLab demo
url: https://jupyter.org/try-jupyter/lab/?path=notebooks%2FIntro.ipynb

- title: Jupyter Notebook
description: The original web application for creating and sharing computational documents
src: try/python.svg
src: try/jupyter_notebook.png
alt: Python logo - Launch Jupyter Notebook demo
url: https://jupyter.org/try-jupyter/notebooks/?path=notebooks/Intro.ipynb

Expand Down