feat: create a custom hook to handle tooltip display on headings

[Aejkatappaja]

Description

• Solving #4553
• Created a custom hook useTextOverflow to detect whether the text within a referenced container is truncated.
• Using this hook in Column.tsx to handle the display of the Tooltip component.

Changelog

• Added useTextOverflow Hook

  • Detects if text is truncated to manage tooltips accordingly.

• Updated Column Component

  • Integrated useTextOverflow for column name truncation detection.
  • Displays a tooltip when the column name is truncated.

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• The light- and dark-theme are both supported and tested
• The design was implemented and is responsive for all devices and screen sizes
• The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

Before:

After:

[Schwehn42]

Hi, looks pretty good so far, just a small nitpick to add :)

[Aejkatappaja]

Changes applied 5e47cc8

[Schwehn42]

lgtm, thanks for the contribution @Aejkatappaja 🎉