# [Bug] “Submit a Video” Button Not Displaying Correctly in Lesson View #1120

New Issue

2026-08-27T23:28:56Z

enjin2310 commented

2026-08-27 23:28:56 +00:00

Summary

The Submit a Video button in the C# Lesson View does not render properly. The button appears partially visible or misaligned within the right-hand panel, making it difficult to interact with or read.

Issue Description

In the C# Curriculum lesson interface, the Submit a Video button located under the “No videos for this lesson yet” message fails to display correctly. The button’s layout appears broken — either cropped, misaligned, or overlapping adjacent elements. This issue affects usability and visual consistency across the lesson page.

Environment

Property	Value
Application	SpikerSoft Learn
Module	C# Lessons and Sandbox
Environment	Production
Browser	Firefox
Operating System	Windows 11
Version	v2026.08.27e
Device	Desktop

Preconditions

User must be logged in and viewing a lesson within the C# Curriculum.

Steps to Reproduce

Log in to the SpikerSoft platform.
Navigate to Tools > C# Playground.
Open any lesson (e.g., Raw String Literals).
Observe the right-hand panel under “No videos for this lesson yet.”

Expected Result

The Submit a Video button should be fully visible, properly aligned, and interactable.

Actual Result

The button appears misaligned or partially hidden.
The text may be truncated or overlapping other UI elements.
Clicking the button may not trigger any visible response.

Evidence

The screenshot shows the Submit a Video button rendered incorrectly in the right-hand panel.
The surrounding text and layout appear normal, isolating the issue to the button’s CSS or container alignment.

Impact

Reduces usability for contributors wishing to upload lesson videos.
Creates inconsistent UI presentation across the learning module.
May discourage user engagement with content submission features.

Frequency

Always

Reproducibility

100%

Severity

Medium

Notes

The issue likely stems from CSS overflow or flex alignment within the right-hand sidebar container. It is recommended to verify the button’s parent container dimensions and ensure responsive layout compatibility.

## Summary The **Submit a Video** button in the **C# Lesson View** does not render properly. The button appears partially visible or misaligned within the right-hand panel, making it difficult to interact with or read. ## Issue Description In the **C# Curriculum** lesson interface, the **Submit a Video** button located under the “No videos for this lesson yet” message fails to display correctly. The button’s layout appears broken — either cropped, misaligned, or overlapping adjacent elements. This issue affects usability and visual consistency across the lesson page. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft Learn | | Module | C# Lessons and Sandbox | | Environment | Production | | Browser | Firefox | | Operating System | Windows 11 | | Version | v2026.08.27e | | Device | Desktop | ## Preconditions User must be logged in and viewing a lesson within the **C# Curriculum**. ## Steps to Reproduce 1. Log in to the SpikerSoft platform. 2. Navigate to **Tools > C# Playground**. 3. Open any lesson (e.g., *Raw String Literals*). 4. Observe the right-hand panel under “No videos for this lesson yet.” ## Expected Result The **Submit a Video** button should be fully visible, properly aligned, and interactable. ## Actual Result - The button appears misaligned or partially hidden. - The text may be truncated or overlapping other UI elements. - Clicking the button may not trigger any visible response. ## Evidence - The screenshot shows the **Submit a Video** button rendered incorrectly in the right-hand panel. - The surrounding text and layout appear normal, isolating the issue to the button’s CSS or container alignment. ## Impact - Reduces usability for contributors wishing to upload lesson videos. - Creates inconsistent UI presentation across the learning module. - May discourage user engagement with content submission features. ## Frequency Always ## Reproducibility 100% ## Severity Medium ## Notes The issue likely stems from CSS overflow or flex alignment within the right-hand sidebar container. It is recommended to verify the button’s parent container dimensions and ensure responsive layout compatibility.

Screenshot 2026-08-27 192745.png

294 KiB

spikerj commented

2026-08-30 21:52:56 +00:00

Thanks George — good catch, and the screenshot is what cracked it.

The Submit a video button itself is fine: it renders at full width, is not
truncated, and its click handler is a plain state toggle with nothing that could
swallow the click. I checked that specifically because you flagged it.

What is actually broken is the thing immediately above it. Zooming into the
right edge of your screenshot, there is a highlighted tab clipped in half — the
rounded rectangle with a play triangle. That is the smart_display icon: the
Videos tab, the very tab you were on. Its label is cut off entirely and
only a fragment of the icon survives, which is exactly the "partially visible"
you described.

The tab strip is a non-wrapping flex row that can hold up to five tabs
(Concepts, Submissions, Reading, Videos, Results) in a rail only ~370px wide.
The tabs cannot shrink past their min-content width, so the row overflows and
the last tab gets cut by the pane edge.

I measured it in a real browser at your rail width — pixels each tab is pushed
past the edge:

Locale / tabs	Overflowing	After fix
en, 4 (yours)	Videos +24px	none
en, 5 (after running code)	Videos +24px, Results +110px	none
es, 4	none	none
es, 5	Resultados +100px	none

Worth noting for your testing: this one only reproduces in English at four
tabs. In Spanish it looks fine there, because "Envíos" is much shorter than
"Submissions". It comes back in Spanish once you run code and the Results tab
appears. So if you had switched language to re-check, it would have looked
fixed when it was not.

Fix is spikerj/spikersoft-angular#903, PR spikerj/spikersoft-angular#904 — the
tabs now wrap to a second row instead of being clipped.

One request: when you next hit this, could you note whether you had run the
code in that lesson first? That adds a fifth tab and makes the clipping much
worse, and it would help to know which state you were testing.

Thanks George — good catch, and the screenshot is what cracked it. The **Submit a video button itself is fine**: it renders at full width, is not truncated, and its click handler is a plain state toggle with nothing that could swallow the click. I checked that specifically because you flagged it. What is actually broken is the thing immediately above it. Zooming into the right edge of your screenshot, there is a highlighted tab clipped in half — the rounded rectangle with a play triangle. That is the `smart_display` icon: the **Videos tab**, the very tab you were on. Its label is cut off entirely and only a fragment of the icon survives, which is exactly the "partially visible" you described. The tab strip is a non-wrapping flex row that can hold up to five tabs (Concepts, Submissions, Reading, Videos, Results) in a rail only ~370px wide. The tabs cannot shrink past their min-content width, so the row overflows and the last tab gets cut by the pane edge. I measured it in a real browser at your rail width — pixels each tab is pushed past the edge: | Locale / tabs | Overflowing | After fix | | --- | --- | --- | | en, 4 (yours) | Videos +24px | none | | en, 5 (after running code) | Videos +24px, Results +110px | none | | es, 4 | none | none | | es, 5 | Resultados +100px | none | Worth noting for your testing: **this one only reproduces in English at four tabs.** In Spanish it looks fine there, because "Envíos" is much shorter than "Submissions". It comes back in Spanish once you run code and the Results tab appears. So if you had switched language to re-check, it would have looked fixed when it was not. Fix is spikerj/spikersoft-angular#903, PR spikerj/spikersoft-angular#904 — the tabs now wrap to a second row instead of being clipped. One request: when you next hit this, could you note whether you had **run the code** in that lesson first? That adds a fifth tab and makes the clipping much worse, and it would help to know which state you were testing.

spikerj commented

2026-08-30 21:58:23 +00:00

Correction to my comment above — I got part of that wrong, and your #1121 is what caught it.

I claimed this "only reproduces in English at four tabs" and suggested Spanish
would look fine. That was wrong. Two mistakes in how I measured it:

I assumed the rail was ~370px wide. The shipped default
(--concept-pane-width) is 320px — narrower, so it clips sooner.
My test page had no webfont loaded, so it laid out in a fallback family
instead of the Roboto the site actually ships. Wrong glyph widths.

Re-measured at the real 320px default with the real font, both locales clip,
which is exactly what your #1121 screenshot shows:

Locale / tabs	Pushed past the rail edge	After fix
en, 4	Videos +53px	none
en, 5 (after running code)	Videos +53px, Results +136px	none
es, 4	Videos +28px	none
es, 5	Videos +27px, Resultados +132px	none

The rail would need to be 374px (en) or 348px (es) before four tabs fit at all,
and ~455px for five. All wider than the default, so it clips out of the box
everywhere. English is worse only because "Submissions" is longer than "Envíos".

So please disregard my "check it in Spanish to confirm" suggestion — that would
have told you nothing. Sorry for the noise; your second report is what corrected
it.

#1121 is the same defect as this one and the same PR fixes both
(spikerj/spikersoft-angular#904).

**Correction to my comment above — I got part of that wrong, and your #1121 is what caught it.** I claimed this "only reproduces in English at four tabs" and suggested Spanish would look fine. That was wrong. Two mistakes in how I measured it: 1. I assumed the rail was ~370px wide. The shipped default (`--concept-pane-width`) is **320px** — narrower, so it clips sooner. 2. My test page had no webfont loaded, so it laid out in a fallback family instead of the Roboto the site actually ships. Wrong glyph widths. Re-measured at the real 320px default with the real font, **both locales clip**, which is exactly what your #1121 screenshot shows: | Locale / tabs | Pushed past the rail edge | After fix | | --- | --- | --- | | en, 4 | Videos +53px | none | | en, 5 (after running code) | Videos +53px, Results +136px | none | | es, 4 | Videos +28px | none | | es, 5 | Videos +27px, Resultados +132px | none | The rail would need to be 374px (en) or 348px (es) before four tabs fit at all, and ~455px for five. All wider than the default, so it clips out of the box everywhere. English is worse only because "Submissions" is longer than "Envíos". So please disregard my "check it in Spanish to confirm" suggestion — that would have told you nothing. Sorry for the noise; your second report is what corrected it. #1121 is the same defect as this one and the same PR fixes both (spikerj/spikersoft-angular#904).

spikerj referenced this issue

2026-08-30 21:58:35 +00:00

# [Bug] “Enviar un video” Button Misaligned in Spanish Language Mode #1121

spikerj commented

2026-08-30 23:54:24 +00:00

Fixed and merged — closing.

Not the Submit a video button - the Videos tab above it, clipped in half by the pane edge because the tab strip could not wrap. It now wraps instead of overflowing (spikerj/spikersoft-angular#904).

The change is on master and deployed. Please re-test when you get a chance; if you still see it, reopen this issue rather than filing a new one so the history stays together.

Fixed and merged — closing. Not the Submit a video button - the Videos tab above it, clipped in half by the pane edge because the tab strip could not wrap. It now wraps instead of overflowing (spikerj/spikersoft-angular#904). The change is on `master` and deployed. Please re-test when you get a chance; if you still see it, reopen this issue rather than filing a new one so the history stays together.

spikerj closed this issue

2026-08-30 23:54:24 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1120