Issue_528_style_table_column_width

[Vixtir]

• Breaking change? (if so, please describe the impact and migration path for existing application instances)

What changes did you make? (Give an overview)
Added new shared component BreakableTextCell that allows to break the text of table column by separators or by letter

Set column width for some table ( Dashboards, Brokers, Topics etc)

Fixed main header transparency bug

Is there anything you'd like reviewers to focus on?

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

• No need to
• Manually (please, describe, if necessary)
• Unit checks
• Integration checks
• Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
• My changes generate no new warnings (e.g. Sonar is happy)
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

[Mgrdich]

in my opinion it is not a good idea to pass style to UI components , it is much better approach to have that configured by props

in this case we can have a single prop called wordBreak or something that add those two properties

[Vixtir]

I used it due to Table.styled.ts has more specific selector for a tag styles white-space: nowrap;

What do you think about using !important

Smth like

const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>`
  ${({ $wordBreak }) => {
    if ($wordBreak) {
      return css`
        word-break: break-word !important;
        white-space: pre-wrap !important;
      `;
    }
  }}
`;

[Vixtir]

Or that will work too

const NavLinkStyled = styled(NavLink)<{ $wordBreak?: boolean }>`
  && {
    ${({ $wordBreak }) =>
      $wordBreak &&
      css`
        word-break: break-word;
        white-space: pre-wrap;
      `}
  }
`;

[Mgrdich]

let's go with the second one