Fix: Classification dropdown overflow on mobile view#11578
Conversation
|
PTAL @jimchamp. |
github-actions
Bot
added
the
Needs: Response
jimchamp
left a comment
jimchamp
left a comment
There was a problem hiding this comment.
Thanks @KrishnaShuk.
We should not be truncating these values.
It's unclear to me what the data-full-label attribute does. Please explain.
Why was so much CSS needed?
| <option value="">$_("Select one of many...")</option> | ||
| $for d in edition_config.classifications: | ||
| <option value="$d.name">$d.label</option> | ||
| <option value="$d.name" data-full-label="$d.label">$truncate(d.label, 45)</option> |
There was a problem hiding this comment.
Explain how data-full-label is used.
There was a problem hiding this comment.
The value should not be truncated.
There was a problem hiding this comment.
-
"data-full-label" stores the full, untruncated text of the classification. We show a shortened version in the dropdown to prevent overflow, but use this hidden attribute to display the complete name in the table after selection.
-
If we do not truncate then the text would be overflowing in dropdown. And truncating it in the dropdown doesn't affect its text in final showcase.
All this is engineered to make it visually correct. If you want i can restore the changes but it would not be right in my opinion. WDYT?
| #select-classification { | ||
| max-width: 300px; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| table.classifications.identifiers { | ||
| width: 100%; | ||
| max-width: 100%; | ||
|
|
||
| td { | ||
| word-wrap: break-word; | ||
| overflow-wrap: break-word; | ||
| word-break: break-word; | ||
| white-space: normal; | ||
| } | ||
|
|
||
| @media only screen and (max-width: @width-breakpoint-tablet) { | ||
| display: block; | ||
|
|
||
| tbody { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| tr { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| border-bottom: 1px solid @lightest-grey; | ||
| padding-bottom: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| td { | ||
| display: block; | ||
| padding: 2px 0; | ||
| border: none !important; | ||
| } | ||
|
|
||
| td:first-child { | ||
| width: 100%; | ||
| text-align: left !important; | ||
| font-weight: bold; | ||
| color: @grey-555; | ||
| margin-bottom: 4px; | ||
| } | ||
|
|
||
| td:nth-child(2) { | ||
| flex: 1; | ||
| min-width: 0; | ||
| padding-right: 10px; | ||
| input { | ||
| width: 100% !important; | ||
| max-width: 100% !important; | ||
| } | ||
| } | ||
|
|
||
| td:last-child { | ||
| width: auto; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
New CSS should be added above the import statements.
I really don't understand why so much CSS was needed here. I was able to correct the overflow by using the following:
@media only screen and (max-width: @width-breakpoint-tablet) {
#select-classification {
max-width: 300px;
}
}There was a problem hiding this comment.
All these css was add to make the key-value pairs in the main showcase visually appealing but some css here is overengineered. I am making a commit to correct it.
jimchamp
added
Needs: Submitter Input
github-actions
Bot
removed
the
Needs: Submitter Input
|
@jimchamp ,this is the final behavior of the latest commit: Screencast.from.2025-12-23.13-54-54.webm |
github-actions
Bot
added
the
Needs: Response
|
@jimchamp, The PR is ready for review. |
|
Code rebased in #12773. |
jimchamp
added
Needs: Staff / Internal
…#12773) * fixed overflow issue, use standard breakpoint variable * fix(css): rewrite classification responsive block as valid plain CSS - Remove stray backtick left in selector after previous fix - Restructure nested @media rule as top-level block (css-loader has no nesting/PostCSS support; nested rules were silently ignored) - Replace var(--width-breakpoint-tablet) in @media condition with hardcoded 768px (CSS custom properties don't work in @media queries) Addresses Copilot review comments on PR #12773. --------- Co-authored-by: krishnaShuk <[email protected]> Co-authored-by: Michael E. Karpeles <[email protected]>
2 participants
Closes #11431
This PR fixes the classification dropdown overflow issue on the book edition edit page, particularly on mobile/smaller screen sizes.
Technical
CSS Changes (static/css/page-user.less):
#select-classificationdropdown width tomax-width: 300pxtable.classifications.identifierson screens ≤600pxword-break: break-wordTemplate Changes (openlibrary/templates/books/edit/edition.html):
$truncate()data-full-labelattribute to preserve full textdata-full-labelwhen adding classifications to the table, ensuring full labels are displayed after selectionTesting
/books/OL23269118M/Alice%27s_adventures_in_Wonderland/edit)Screenshot
Before
Screencast.from.2025-12-11.17-25-34.webm
After
Screencast.from.2025-12-11.17-34-45.webm
Stakeholders
@jimchamp