Adjust tags list to use screen size relative units
| @@ -158,12 +158,8 @@ | |||
| 158 | flex-wrap: wrap; | 158 | flex-wrap: wrap; |
| 159 | align-items: flex-start; | 159 | align-items: flex-start; |
| 160 | margin-top: 5px; | 160 | margin-top: 5px; |
| 161 | margin-bottom: 10px; | 161 | max-height: 40dvh; |
| 162 | /* not 100% due to margins */ | ||
| 163 | max-height: 90%; | ||
| 164 | /* scroll the list if needed */ | ||
| 165 | overflow-y: auto; | 162 | overflow-y: auto; |
| 166 | |||
| 167 | } | 163 | } |
| 168 | 164 | ||
| 169 | .rm_tag_filter .tag { | 165 | .rm_tag_filter .tag { |
| @@ -290,4 +286,4 @@ | |||
| 290 | min-height: calc(var(--mainFontSize)*2); | 286 | min-height: calc(var(--mainFontSize)*2); |
| 291 | width: var(--avatar-base-width); | 287 | width: var(--avatar-base-width); |
| 292 | justify-content: center; | 288 | justify-content: center; |
| 293 | } | ||
| 293 | \ No newline at end of file | \ No newline at end of file | |
| 289 | } | ||
| @@ -295,6 +295,11 @@ table.responsiveTable { | |||
| 295 | outline: 1px solid var(--interactable-outline-color); | 295 | outline: 1px solid var(--interactable-outline-color); |
| 296 | } | 296 | } |
| 297 | 297 | ||
| 298 | /* Prevent the outline from being cut off by hiding the overflow */ | ||
| 299 | .tag.interactable:focus-visible { | ||
| 300 | outline-offset: -1px; | ||
| 301 | } | ||
| 302 | |||
| 298 | /* The specific input controls can always have a faint outline, even on mouse interaction, to give a better hint */ | 303 | /* The specific input controls can always have a faint outline, even on mouse interaction, to give a better hint */ |
| 299 | select:focus-visible, | 304 | select:focus-visible, |
| 300 | input:focus-visible, | 305 | input:focus-visible, |
| @@ -3094,8 +3099,6 @@ select option:not(:checked) { | |||
| 3094 | 3099 | ||
| 3095 | #charListFixedTop { | 3100 | #charListFixedTop { |
| 3096 | padding: 5px; | 3101 | padding: 5px; |
| 3097 | /*prevent huge taglist from taking up the whole panel */ | ||
| 3098 | overflow-y: hidden; | ||
| 3099 | } | 3102 | } |
| 3100 | 3103 | ||
| 3101 | #form_character_search_form { | 3104 | #form_character_search_form { |
| @@ -3122,6 +3125,7 @@ select option:not(:checked) { | |||
| 3122 | 3125 | ||
| 3123 | #character_search_bar { | 3126 | #character_search_bar { |
| 3124 | flex: 1; | 3127 | flex: 1; |
| 3128 | margin-bottom: 0; | ||
| 3125 | } | 3129 | } |
| 3126 | 3130 | ||
| 3127 | #rm_button_search { | 3131 | #rm_button_search { |
| @@ -6291,4 +6295,4 @@ body:not(.movingUI) .drawer-content.maximized { | |||
| 6291 | .info-block.error { | 6295 | .info-block.error { |
| 6292 | border-color: var(--error-color, #e87f7f); | 6296 | border-color: var(--error-color, #e87f7f); |
| 6293 | background-color: rgba(241, 163, 163, 0.2); | 6297 | background-color: rgba(241, 163, 163, 0.2); |
| 6294 | } | ||
| 6294 | \ No newline at end of file | \ No newline at end of file | |
| 6298 | } | ||