Clipboard - The icons and the checkboxes Misalignment fixed

[GautamBytes]

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.

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

#Before -->

#After -->

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]

Hi @bjester and @pcenov , due to some issues , I needed to setup repo locally again and lost track of that branch so , raising this pr to fix the issue via more localize fix rather than updating the checkbox.vue itself , you can have a look and see if it fixes the issue. Thanks!

[MisRob]

Thanks for following up @GautamBytes. Visually this looks definitely better than before. Code-wise, @bjester I think it addresses your feedback #4923, is that right?

@GautamBytes Would it be possible to fine-tune the styling so that checkbox center is vertically aligned with channel/folder/resource center? From the screenshots it seems checkbox is rather aligned to the bottom of the icon right now.

[GautamBytes]

Sure @MisRob , will try to make it vetically aligned!

[GautamBytes]

Hi @MisRob , I tried many permutations and combinations to see if this get vertically aligned with channel/folder/resource center but failed till now . When i zoom a bit(as you can see in image attached , it does not look like aligned with bottom of icons ) but yeah at first sight it definitely looks bottom aligned . I guess slightly decreasing checkbox size might make it look like that but as @bjester suggested not to change checkbox.vue , I guess this one is good to go . Would be happy if you can suggest what else can i do to achieve so:)

[MisRob]

@GautamBytes Thanks for continuing. Few guiding questions that may help us to figure out what to do next:

• Are those pt- classes applied or not?
• If not, why (overriden from somewhere else, ...)?
• If yes, perhaps pt-s are not nuanced enough and we need to use precise px value?
• If none of these, what's going on exactly?

Yes I think @bjester's request to not modify the checkbox itself makes sense. Also, there are some things on KDS side that Blaine reported that may help a bit here too if we get block, but I hope we can improve in the scope of this PR.

In any case, I don't consider this feedback as blocking. It looks much better already than originally. @bjester how does the new screenshot look like to you?

[GautamBytes]

Hi @MisRob , sorry for following up late on this , I tried your suggestions and it seems to me that 3rd point give us the expected result . It looks like this now --

[GautamBytes]

Hey @MisRob & @bjester , just pinging if you can have a review otherwise no worries , review at your convenience!

[MisRob]

Hi @GautamBytes, I'm sorry for late reply. Yes the new screenshots looks very nice. I will follow-up later with full review, for now you can keep it as is. Thank you.

[bjester]

Thanks @GautamBytes !