Page MenuHomePhabricator

Change UI for mobile view VCT
Open, In Progress, Needs TriagePublic

Assigned To
Authored By
Reputation22
Mar 3 2025, 3:42 PM
Referenced Files
F71128370: Screenshot 2025-12-19 020910.png
Dec 18 2025, 8:42 PM
F71128358: Screenshot 2025-12-19 020854.png
Dec 18 2025, 8:42 PM
F71101589: Screenshot 2025-12-17 163217.png
Dec 17 2025, 11:04 AM
F71101584: Screenshot 2025-12-17 163203.png
Dec 17 2025, 11:04 AM
F70934925: Screenshot 2025-12-08 131905.png
Dec 8 2025, 8:21 AM
F70934917: Screenshot 2025-12-08 131855.png
Dec 8 2025, 8:21 AM
F70934897: Screenshot 2025-12-08 131924.png
Dec 8 2025, 8:21 AM
F70934884: Screenshot 2025-12-08 131935.png
Dec 8 2025, 8:21 AM

Description

Attaching 2 screenshots of the tool from desktop and mobile view. Lets try to synchronize them and make them look similar
Explicitly in mobile view:

  1. Text color is somehow blue (not black, as in desktop).
  2. No Border around the hamburger menu drawer, makes it difficult to differentiate from the previous screen. Lets add a border to the menu

Exit Criteria:

  1. Check for both logged in and logged out state
  2. Check for both dark and light mode.

Feel free to ping any of the maintainers or maybe here in the phabricator itself if any doubt.

Screenshot 2025-03-03 at 21.07.42.png (1×2 px, 188 KB)

Screenshot 2025-03-03 at 21.08.04.png (1×1 px, 92 KB)

Event Timeline

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

how do get the source code so i can create a PR

@ChiomaVero I'd like to keep working on this, but happy to collaborate if you'd like to

@ChiomaVero I'd like to keep working on this, but happy to collaborate if you'd like to

That's okay. Could you give me a clue on how to get a task's repo? to enable me clone, create b ranch and a PR dressing the opened issue. I'm only famliar with github

Thank you so much.
I have one more question, if I want to solve other tasks, how do I locate their repository, is there a button that I am supposed to click?

Thank you so much.
I have one more question, if I want to solve other tasks, how do I locate their repository, is there a button that I am supposed to click?

You just need to go on their tags (in this case VideoCutTool). This should open a task workboard. Then check the left panel and click on the parent tab (usually by the same name as tag)

Thank you so much.
I have one more question, if I want to solve other tasks, how do I locate their repository, is there a button that I am supposed to click?

You just need to go on their tags (in this case VideoCutTool). This should open a task workboard. Then check the left panel and click on the parent tab (usually by the same name as tag)

Thank you so much.
I have one more question, if I want to solve other tasks, how do I locate their repository, is there a button that I am supposed to click?

You just need to go on their tags (in this case VideoCutTool). This should open a task workboard. Then check the left panel and click on the parent tab (usually by the same name as tag)

Thank you so much!

Please do not full quote previous comments but keep tasks readable - thanks.

Since there was no response from the assignee, removing for now so that others can take it up.

Hey @HridyaKK removing you as assignee for the ticket, since no updates here
feel free to re-claim the ticket

also will be refactoring the ticket scope and the epic for mobile view (in some time).

Reputation22 added a subscriber: HridyaKK.

Hi! I'd like to work on this task and prepare a patch.
If it's still available, please keep it assigned to me. Thank you!

Hi! I'd like to work on this task and prepare a patch.
If it's still available, please keep it assigned to me. Thank you!

sure..feel free to claim the task, and lets use this space to address any doubts if you have any

Hi! I’ve submitted an initial fix for the mobile UI issue.

Merge Request:https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

This is my first contribution, so I started with the text color cleanup (blue → black).
If additional UI adjustments are required, I am happy to update the MR based on reviewer feedback.

Thank you!

Hi! I’ve submitted an initial fix for the mobile UI issue.

Merge Request:https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

This is my first contribution, so I started with the text color cleanup (blue → black).
If additional UI adjustments are required, I am happy to update the MR based on reviewer feedback.

Thank you!

Hi sarv!
thanks for the MR.
as mentioned in the ticket description, please address the rest of the points as well
i.e having a border over the hamburger menu dashboard

and also checking the two cases in dark mode
so ideally in dark mode the text should be white(as other texts are expected to be)
and similarly the border color of hamburger menu should be same as the colors used for similar scenarios (in dark mode)

post all these changes, do post screenshot of all the 4 cases here/gitlab

thanks

Hi! I’ve completed all the requested UI changes and verified them manually.
I’m attaching the screenshots for reference.

Completed changes

Added a visible border to the hamburger icon in light mode

Added the correct border color and icon color for dark mode

Updated the close (“X”) icon so it appears white in dark mode

Ensured mobile-only styles behave correctly across breakpoints

Verified smooth sidebar open/close behavior in both themes

Screenshots

Light Mode

Screenshot 2025-12-08 131935.png (775×426 px, 18 KB)
Sidebar Closed

Light Mode{F70934897} Sidebar Open

Dark Mode

Screenshot 2025-12-08 131855.png (791×433 px, 20 KB)
Sidebar Closed

Dark Mode

Screenshot 2025-12-08 131905.png (775×420 px, 12 KB)
Sidebar Open

you can see the merge request here : https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

If anything further needs adjustment or refinement, I’ll be glad to update it — please let me know.

Hi! My GitLab Merge Request is ready for review:
https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

Please let me know if anything else is required.

hey @Sarv_227 have replied over the MR. please check

also please add this line in the MR description

Bug: <phab ticket id>

this is a general commit message practise/guideline over the wiki ecosystem

Hi,

I’ve addressed the feedback on the associated GitLab Merge Request and pushed the updated changes.

The MR now includes:

Sidebar drawer border (to differentiate it from the underlying UI)

Proper username text color handling for light and dark modes

Removal of inline styles in favor of SCSS-based theming

The Merge Request has been updated with the required Bug: T387744 reference.

MR link : https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

Please let me know if any further changes are needed. Thanks!

Hi,

While working on the mobile UI, I noticed that in mobile view, the “VideoCutTool” heading text appears white in light mode, which makes it difficult to read against the light background.

The heading appears correctly in dark mode, and this issue does not occur in desktop view — it seems to be limited to mobile light mode only.

This issue is separate from the previously addressed sidebar and drawer changes, so I’m tracking it here as a new task.

Please let me know if you’d like me to proceed with a fix, or if there is any design guidance I should follow for this case.

also attaching the screenshots for clarity

Screenshot 2025-12-17 163203.png (361×319 px, 10 KB)
Screenshot 2025-12-17 163217.png (328×341 px, 6 KB)

Thanks!

Hi,

While working on the mobile UI, I noticed that in mobile view, the “VideoCutTool” heading text appears white in light mode, which makes it difficult to read against the light background.

The heading appears correctly in dark mode, and this issue does not occur in desktop view — it seems to be limited to mobile light mode only.

This issue is separate from the previously addressed sidebar and drawer changes, so I’m tracking it here as a new task.

Please let me know if you’d like me to proceed with a fix, or if there is any design guidance I should follow for this case.

also attaching the screenshots for clarity

Screenshot 2025-12-17 163203.png (361×319 px, 10 KB)
Screenshot 2025-12-17 163217.png (328×341 px, 6 KB)

Thanks!

Hey @Sarv_227
Thanks for pointing it out. I feel we can take this change within this task/MR itself.
If possible, can you please push the fix for this in the above MR itself?

Thanks

Thanks for confirming!

I’ll push the fix for the mobile light mode heading contrast in the same MR and update it shortly with screenshots.

Thanks!

I’ve pushed an update to the existing MR to fix the low-contrast “VideoCutTool” heading in mobile light mode.

Screenshot 2025-12-19 020854.png (274×408 px, 7 KB)

Screenshot 2025-12-19 020910.png (278×420 px, 8 KB)

Sarv_227 changed the task status from Open to In Progress.Dec 19 2025, 4:59 AM

Hi! My GitLab Merge Request is ready for review:
https://gitlab.wikimedia.org/cloudvps-repos/videocuttool/VideoCutTool/-/merge_requests/57

Please let me know if anything else is required.

@Reputation22 any update?
also
Hi Varun,

I’ve been contributing to this project recently and really enjoying learning the codebase and workflow. I’m also exploring open-source programs like GSoC and wanted to ask for some general guidance.

From your experience, which areas of this project would you recommend a student focus on to become a more effective contributor? Are there particular types of tasks or skills that tend to be most valuable here?

If you’re open to it, I’d really appreciate any guidance or direction you can share. I plan to continue contributing here regularly, and I will sincerely follow the advice you suggest as I work on improving my contributions.

Thanks for your time, and I truly appreciate the effort you put into maintaining this project.

I mainly work with web development and DevOps, and I’m especially interested in improving user-facing features, tooling, and infrastructure — I’d appreciate your guidance on where I could be most helpful.