/* Ensure the container of the table header is a flex container */
.bx--data-table-v2 th {
    display: flex;
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out the header text and the icon */
    white-space: nowrap; /* Prevent wrapping of text */
    overflow: hidden; /* Hide overflow */
}

/* Style for the header text to prevent it from taking up full width */
.bx--data-table-v2 th .header-text {
    flex: 1; /* Allow text to grow and shrink as needed */
    margin-right: 8px; /* Provide some space between the text and the icon */
    overflow: hidden; /* Hide text overflow */
    text-overflow: ellipsis; /* Add ellipsis to overflowed text */
}

/* Ensure the sort icon is an inline element with reduced margins */
.bx--data-table-v2 th .custom-overflow-icon {
    flex-shrink: 0; /* Prevent the icon from shrinking */
    display: inline-flex; /* Use inline-flex to keep it in line */
    align-items: center; /* Align the icon vertically */
}

/* Ensure the image inside the sort icon container does not break the layout */
.bx--data-table-v2 th .custom-overflow-icon img {
    height: auto; /* Maintain aspect ratio */
    width: 1em; /* Use em units to scale with text */
}