Skip to content
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.

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

Fix/clipboard icons alignment #4923

Open
wants to merge 6 commits into
base: unstable
Choose a base branch
from

Conversation

GautamBytes
Copy link
Contributor

Summary

  • Fixed checkbox alignment issues in the UI that were causing misalignment between checkbox icons and their corresponding text labels. The checkboxes were appearing slightly misaligned with channel names and folder items in different views.

  • Modified checkbox.vue to improve alignment using a flexbox-based approach

  • Added a slight vertical offset to properly align checkbox icons with text

  • Standardized checkbox icon dimensions to ensure consistency

  • Manually verified on both channel and folder item views to ensure proper alignment

  • The fix addresses the inconsistent vertical positioning that was affecting UI appearance

#Before -->
image

#After -->
WhatsApp Image 2025-02-27 at 01 00 08_d9b637a7

References

Addresses #4771

Reviewer guidance

  • Check that checkbox alignment appears consistent in:
  • Channel listings (specifically Alpha channel view)
    • Folder and file listings
  • Content item selections
  • Verify that the changes don't affect checkbox functionality - selection behavior should remain the same
  • Test in different viewport sizes to ensure responsive behavior is maintained

@GautamBytes
Copy link
Contributor Author

Hey @pcenov and @bjester , I have fixed the issue . You can have a look at the pr and suggest me wherever improvements can be made. Thanks!





Copy link
Member

Choose a reason for hiding this comment

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

This seems like a mistake to add so many extra new lines?





Copy link
Member

Choose a reason for hiding this comment

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

And more new lines here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes noticed this after pushing will work on this soon.

@@ -148,12 +148,61 @@

</script>

<!-- Remove "scoped" so that our override rules apply globally to KCheckbox internals -->
<style lang="less">
Copy link
Member

Choose a reason for hiding this comment

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

We're no longer supporting LESS. SCSS or plain CSS only please

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay sure . Also , Any guidance on how to make sure code passes javascript cl tests , i am troubling with that a bit also?

Copy link
Member

Choose a reason for hiding this comment

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

The error I saw in the tests in failing checks here on the PR seems related to this issue. Presumably, switching back to SCSS should help?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay sure , will do the suggested changes. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants