Adjust tags list to use screen size relative units

2a971a517ceaa0292147e7218955b250ed523806

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/tags.css+2 -6 Viewed

     flex-wrap: wrap;
     align-items: flex-start;
     margin-top: 5px;
     marginmax-bottomheight: 10px40dvh;
 -    /* not 100% due to margins */
 -    max-height: 90%;
 -    /* scroll the list if needed */
     overflow-y: auto;
+-
+}
 .rm_tag_filter .tag {

     min-height: calc(var(--mainFontSize)*2);
     width: var(--avatar-base-width);
     justify-content: center;
 -}
 \ No newline at end of file
 +}

public/style.css+7 -3 Viewed

     outline: 1px solid var(--interactable-outline-color);
+}
 +/* Prevent the outline from being cut off by hiding the overflow */
 +.tag.interactable:focus-visible {
 +    outline-offset: -1px;
 +}
++
 /* The specific input controls can always have a faint outline, even on mouse interaction, to give a better hint */
 select:focus-visible,
 input:focus-visible,

 #charListFixedTop {
     padding: 5px;
 -    /*prevent huge taglist from taking up the whole panel */
 -    overflow-y: hidden;
+}
 #form_character_search_form {

 #character_search_bar {
     flex: 1;
 +    margin-bottom: 0;
+}
 #rm_button_search {

 .info-block.error {
     border-color: var(--error-color, #e87f7f);
     background-color: rgba(241, 163, 163, 0.2);
 -}
 \ No newline at end of file
 +}