fix(files): Adjust NavigationQuota for Nextcloud 30 design

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Oct 16, 2024 · ae723d8 · ae723d8
1 parent 94e1241
commit ae723d8
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
@@ -167,15 +167,18 @@ export default {
 // User storage stats display
 .app-navigation-entry__settings-quota {
  // Align title with progress and icon
- &--not-unlimited::v-deep .app-navigation-entry__name {
- margin-top: -6px;
+ --app-navigation-quota-margin: calc((var(--default-clickable-area) - 24px) / 2); // 20px icon size and 4px progress bar
+
+ &--not-unlimited :deep(.app-navigation-entry__name) {
+ line-height: 1;
+ margin-top: var(--app-navigation-quota-margin);
  }
 
  progress {
  position: absolute;
- bottom: 12px;
- margin-inline-start: 44px;
- width: calc(100% - 44px - 22px);
+ bottom: var(--app-navigation-quota-margin);
+ margin-inline-start: var(--default-clickable-area);
+ width: calc(100% - (1.5 * var(--default-clickable-area)));
  }
 }
 </style>