kea-app-tab component improvements

While working on #915 (closed), it occurred to me that there are few things that could be improved in kea-app-tab component UI/UX.

1. Overview row - Daemon Information vs Hooks columns proportions

   Currently proportions for the columns are 6:6. By default it looks like:

   Hooks names are not that wide, so the proportions could be changed to 8:4:

2. Hooks paths displayed after click on a hook name

   After click on a hook name there is a path displayed:

   

   I hear that intention of it is the possibility to copy the path to the clipboard. The path doesn't look good with broken lines. Instead of p-inplace component there could be a tooltip displayed Click to copy hook path to the clipboard. Click event would write the hook path to the clipboard. The discussion about this concept was in !682 (comment 419854) and following comments.

   @slawek had some concerns:

   How is a user supposed to know the full path will be copied to a clipboard on click?

   The tooltip will display that information: what is about to happen after click.

   And my counter question: how is the user supposed to know that right now when the hook name is clicked, it will be changed to a hook path? Currently, it probably works for the user like: I can click that? Ok, let's click that and see what happens next...

   Especially, why should the user expect the copied value to be a full path instead of displaying the hook name? It doesn't look to me as a UX improvement. If you would like to do it this way, you should inform a user what action will be performed.

   The tooltip will display that information: what is about to happen after click.

   but how do you indicate the copied value is a full path?

   My proposal is to use Clipboard API writeText which returns a Promise, so successful/failed write to the clipboard can be displayed as a notification.

navigator.clipboard.writeText("some hook path").then(
  () => {
    /* clipboard successfully set */
  },
  () => {
    /* clipboard write failed */
  },
);

3. Hooks list display

   When there are more hooks loaded in Kea, and the screen displaying the component is not that wide, there happens this overlapping:

   This is because one list entry consists of 3 columns in proportions 1:10:1. This could be constructed/styled in a better way to avoid the overlap.