Skip to content

fix: display calendar views and add responsiveness #619

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

Jump to bottom
Open
TineoC wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix: display calendar views and add responsiveness #619

TineoC wants to merge 5 commits into from
+347 −19

Conversation

@TineoC
Copy link
Contributor

@TineoC TineoC commented Jan 3, 2026 •
edited
Loading

Description

This PR improves the FullCalendar component's responsiveness and fixes several rendering issues:

Key Changes

  • Fix: Added calendar-responsive.css with fix for Docsy table conflict that was causing calendar grid to collapse
  • Responsive Design: Implemented comprehensive responsive styles for mobile, tablet, and desktop
  • Mobile Optimization:
    • Shows only list and day views on mobile devices (less than 768px)

Closes #617
Closes #567

@k8s-ci-robot k8s-ci-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. do-not-merge/invalid-commit-message Indicates that a PR should not merge because it has an invalid commit message. labels Jan 3, 2026
@k8s-ci-robot k8s-ci-robot requested review from jberkus and lmktfy January 3, 2026 14:00
@k8s-ci-robot k8s-ci-robot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jan 3, 2026
@TineoC TineoC marked this pull request as ready for review January 3, 2026 14:04
@k8s-ci-robot k8s-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 3, 2026
@TineoC
fix: improve calendar responsiveness and mobile support
47fdba4 
- Add calendar-responsive.css with critical Docsy table conflict resolution
- Implement responsive design for mobile, tablet, and desktop
- Add dynamic height calculation to fit viewport
- Show only list and day views on mobile devices
- Ensure footer and feedback sections remain visible
- Improve touch targets and scrolling on mobile devices
- Add landscape orientation optimization
- Address calendar rendering issues with proper table display
@TineoC TineoC force-pushed the fix/calendar-responsive-improvements branch from 08a17a6 to 47fdba4 Compare January 3, 2026 14:06
@k8s-ci-robot k8s-ci-robot removed the do-not-merge/invalid-commit-message Indicates that a PR should not merge because it has an invalid commit message. label Jan 3, 2026
@TineoC TineoC changed the title fix: improve calendar responsiveness and mobile support fix: display calendar views and add responsiveness Jan 3, 2026
@Priyankasaggu11929
Copy link
Member

Priyankasaggu11929 commented Jan 3, 2026

/assign @SayakMukhopadhyay

@TineoC
Copy link
Contributor Author

TineoC commented Jan 3, 2026 •
edited
Loading

Also, I would like to get feedback from you guys. I decided to display only the list and day on mobile since I considered those the only two layouts that are usable on a mobile screen. But I am open to any feedback.

bupd
bupd approved these changes Jan 3, 2026
View reviewed changes
Copy link
Contributor

@bupd bupd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

@k8s-ci-robot
Copy link
Contributor

k8s-ci-robot commented Jan 3, 2026

@bupd: changing LGTM is restricted to collaborators

Details

In response to this:

/lgtm

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

@chris-short
Copy link
Contributor

chris-short commented Jan 16, 2026

/lgtm
/approve

@k8s-ci-robot k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Jan 16, 2026
@chris-short
Copy link
Contributor

chris-short commented Jan 16, 2026

/assign @kaslin

@TineoC TineoC mentioned this pull request Jan 16, 2026
Closed
11 tasks
lmktfy
lmktfy reviewed Jan 17, 2026
View reviewed changes
Copy link
Member

@lmktfy lmktfy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can I check the copyright status of this change; is it all your work, or is it a mix of your work and AI authoring?

static/css/calendar-responsive.css
Copy link
Member

@lmktfy lmktfy Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi. Can you simplify the comments in this file?

@k8s-ci-robot
Copy link
Contributor

k8s-ci-robot commented Jan 17, 2026

New changes are detected. LGTM label has been removed.

@k8s-ci-robot k8s-ci-robot removed the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Jan 17, 2026
@k8s-ci-robot
Copy link
Contributor

k8s-ci-robot commented Jan 17, 2026

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: bupd, chris-short, TineoC
Once this PR has been reviewed and has the lgtm label, please ask for approval from kaslin. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@TineoC
Copy link
Contributor Author

TineoC commented Jan 17, 2026

I used AI for the css.

@TineoC TineoC requested review from bupd and lmktfy January 17, 2026 22:52
@jberkus
Copy link
Contributor

jberkus commented Feb 5, 2026 •
edited
Loading

Definitely an improvement. Still having some display problems with scrolling. though (Android/Firefox):

signal-2026-02-04-160212

@TineoC
Copy link
Contributor Author

TineoC commented Feb 5, 2026

Screenshot_20260204-195553.png

This is how it looks using chrome and Google pixel

Definitely an improvement. Still having some display problems with scrolling. though (Android/Firefox):

signal-2026-02-04-160212

@TineoC
Copy link
Contributor Author

TineoC commented Feb 5, 2026

I would try a few browsers to see if I could replicate that issue

@TineoC
Copy link
Contributor Author

TineoC commented Feb 5, 2026

Testing in a few browsers:

Chrome

Web

image image

Mobile

image image

Firefox

Web

image image

Mobile

image image image

Safari

Web

image image

Mobile

image

@chris-short
Copy link
Contributor

chris-short commented Feb 6, 2026

FWIW, I cannot reproduce the alignment issue in Chrome DevTools at any dimensions

@TineoC
Copy link
Contributor Author

TineoC commented Feb 6, 2026

FWIW, I cannot reproduce the alignment issue in Chrome DevTools at any dimensions

With my last commit, it should cover Firefox browsers. That's the only browser that has presented issues so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jberkus jberkus Awaiting requested review from jberkus

@Priyankasaggu11929 Priyankasaggu11929 Awaiting requested review from Priyankasaggu11929

@stmcginnis stmcginnis Awaiting requested review from stmcginnis

@lmktfy lmktfy Awaiting requested review from lmktfy

@bupd bupd Awaiting requested review from bupd

Assignees

@chris-short chris-short

@kaslin kaslin

@SayakMukhopadhyay SayakMukhopadhyay

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Events Calendar can't filter by day, week, month Layout Issues on Kubernetes Calendar and Resources Pages on Mobile

9 participants

@TineoC @Priyankasaggu11929 @k8s-ci-robot @chris-short @jberkus @bupd @lmktfy @kaslin @SayakMukhopadhyay