Add arrow symbols to all dropdown selection controls

[dkammer]

In settings-controls.ts, the dropdowns for timestamp, dimensionality reduction and color attribute are missing the arrow to signal that these are dropdown controls. Color Scale has this feature already:

.color-scale-select {
    position: relative;
    cursor: pointer;
    user-select: none;

    .selected-scale {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid #d0d0d0;
        background: white;

        /* Custom arrow */
        &::after {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: auto;
            background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23333' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 16px 16px;
        }
    }

This should be refactored to a mixin and preferably also have an open state, turning the arrow by 180 degrees.

[dkammer]

Also make ellipsis for long attribute names: