table th a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px 12px;   /* move your spacing here */
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

table th {
    padding: 0;   /* let the <a> handle spacing instead */
    cursor: pointer;
}

th.orderable a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
}

th.orderable a::after {
    content: "⇅";       /* neutral, unsorted state */
    opacity: 0.4;
    margin-left: 6px;
}

th.orderable.asc a::after {
    content: "↑";
    opacity: 1;
}

th.orderable.desc a::after {
    content: "↓";
    opacity: 1;
}