More small improvements (e.g. dashboard, user status dialog)

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

apps/dashboard/src/App.vue

@@ -505,9 +505,9 @@ export default {
 
 	& > .panel--content {
 		margin: 0 16px 16px 16px;
-		height: 420px;
+		height: 424px;
 		// We specifically do not want scrollbars inside widgets
-		overflow: hidden;
+		overflow: visible;
 	}
 
 	// No need to extend height of widgets if only one column is shown

apps/user_status/src/UserStatus.vue

@@ -231,6 +231,11 @@ export default {
 		align-items: flex-start !important;
 		color: var(--color-main-text) !important;
 
+		&:focus-visible {
+			padding: 6px 8px 1px 8px !important;
+			margin: 2px !important;
+		}
+
 		&:not([href]) {
 			height: var(--header-menu-item-height) !important;
 			color: var(--color-text-maxcontrast) !important;

core/css/apps.scss

@@ -163,9 +163,9 @@ kbd {
 				border: 2px solid var(--color-primary);
 				border-radius: var(--border-radius);
 				outline: none;
-				padding: 0 8px 0 42px !important;
 				background-position: 12px center;
 				line-height: 40px;
+				padding: 0 10px 0 12px;
 			}
 			&.active,
 			a:active,
@@ -288,6 +288,9 @@ kbd {
 
 				&.svg {
 					padding: 0 12px 0 44px;
+					:focus-visible {
+						padding: 0 8px 0 42px;
+					}
 				}
 				&:first-child img {
 				    margin-right: 11px;

core/css/header.scss

@@ -149,6 +149,12 @@
 					&.active {
 						background-color: var(--color-primary-light);
 					}
+					&:focus-visible {
+						padding: 8px 10px;
+						margin: 2px;
+						width: calc(100% - 4px);
+						height: $header-menu-entry-height - 4px !important;
+					}
 					span {
 						display: inline-block;
 						padding-bottom: 0;
@@ -463,6 +469,9 @@ nav[role='navigation'] {
 			letter-spacing: -0.5px;
 			font-size: 12px;
 			margin: 2px;
+			&:focus-visible {
+			  height: 43px;
+			}
 		}
 
 		/* focused app visual feedback */