#6754 truncatefy fix

[rationality6]

Summary

this is fix for number #6754

#6754

before

after

Added one div tag in KRadioButton for class

and add css for truncate texts

Contributor Checklist

PR process:

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Testing:

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

Reviewer Checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[codecov]

Codecov Report

Merging #6830 into develop will increase coverage by 0.01%.
The diff coverage is n/a.

Impacted Files	Coverage Δ
packages/kolibri-components/src/KRadioButton.vue	100.00% <ø> (ø)
kolibri/core/content/utils/channel_import.py	88.92% <0.00%> (+0.56%)	⬆️
kolibri/core/tasks/utils.py	93.22% <0.00%> (+5.08%)	⬆️

[indirectlylit]

It looks the div is a sibling of a span, which is not typical because one is block and the other is inline-block. I would expect siblings to use the same display property.

[rationality6]

@indirectlylit Is the way that Kolibri code intends? Let me know if I've misunderstood. Then I'll fix again.

[indirectlylit]

I'm still a bit confused - now it's two inline blocks with width 100%?

My guess is that both those spans (for the label and description) should actually just be divs with their default display: block properties?

[indirectlylit]

thanks @rationality6

code looks good to me. @nucleogenesis would you mind testing? Also flagging in learningequality/kolibri-design-system#12

[rationality6]

I forgot to comment on code after commit, sorry. Thank you for reviewing @indirectlylit.

[nucleogenesis]

@indirectlylit @rationality6

I'm not getting the ellipses - rather the text is wrapping in its container. Tested in Firefox and Chromium.

I can get the overflow: ellipsis to work if I add the white-space: nowrap; CSS property to the text-truncate class though. However, I do think that wrapping looks good. There is a 40 character limit to the name of the network when added and named through this dialog (seen in the above example) - and even if network names could be longer by some other means, it looks fine enough IMO. See the below image for an exaggerated example of a very very very long network name.

[rationality6]

Thank you @nucleogenesis. I found out what I made a mistake. "White-space: nowrap;" as you say
. If there is a whitespace in String, it will have new line Or it works the way I thought it would.
Once I added "white-space: nowrap;" I think it's okay to just change the line, as you said. Let me know, If the way would be better.

after with nowrap

[rationality6]

@nucleogenesis, @indirectlylit
Do you guys know what am I missed? I just put in a single line of css.

[nucleogenesis]

Hey @rationality6 that looks good to me so far.

As for the failing Buildkite, there were some issues with the build system. I just restarted it so it will likely pass and be ready for merge. I'll check back on it and merge when passing.

Thank you @rationality6 !!!

[indirectlylit]

thank you!