fix: Fixed overflow issue inside the ldap page (directus#23746)

Co-authored-by: Pascal Jufer <[email protected]>

.changeset/dirty-feet-grab.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Ensured elements on login page are correctly truncated when not enough space is available

app/src/routes/login/components/login-form/ldap-form.vue

@@ -111,7 +111,9 @@ async function onSubmit() {
 		<v-notice v-if="error" type="warning">
 			{{ errorFormatted }}
 		</v-notice>
-		<v-button type="submit" :loading="loggingIn" large>{{ t('sign_in') }}</v-button>
+		<v-button class="sign-in" type="submit" :loading="loggingIn" large>
+			<v-text-overflow :text="t('sign_in')" />
+		</v-button>
 	</form>
 </template>
 
@@ -120,4 +122,8 @@ async function onSubmit() {
 .v-notice {
 	margin-bottom: 20px;
 }
+
+.sign-in {
+	max-width: 50%;
+}
 </style>

app/src/routes/login/components/login-form/login-form.vue

@@ -119,7 +119,9 @@ async function onSubmit() {
 			{{ errorFormatted }}
 		</v-notice>
 		<div class="buttons">
-			<v-button type="submit" :loading="loggingIn" large>{{ t('sign_in') }}</v-button>
+			<v-button class="sign-in" type="submit" :loading="loggingIn" large>
+				<v-text-overflow :text="t('sign_in')" />
+			</v-button>
 			<router-link to="/reset-password" class="forgot-password">
 				{{ t('forgot_password') }}
 			</router-link>
@@ -147,4 +149,8 @@ async function onSubmit() {
 		color: var(--theme--foreground);
 	}
 }
+
+.sign-in {
+	max-width: 50%;
+}
 </style>

app/src/routes/login/components/sso-links.vue

@@ -71,7 +71,7 @@ const errorFormatted = computed(() => {
 					<v-icon :name="provider.icon" />
 				</div>
 				<div class="sso-title">
-					{{ t('log_in_with', { provider: provider.label }) }}
+					<v-text-overflow :text="t('log_in_with', { provider: provider.label })" />
 				</div>
 			</a>
 		</template>
@@ -117,6 +117,7 @@ const errorFormatted = computed(() => {
 		align-items: center;
 		padding: 0 16px 0 20px;
 		font-size: 16px;
+		overflow: hidden;
 	}
 
 	&:hover {

app/src/routes/login/login.vue

@@ -48,7 +48,7 @@ useHead({
 <template>
 	<public-view>
 		<div class="header">
-			<h1 class="type-title">{{ t('sign_in') }}</h1>
+			<h1 class="type-title"><v-text-overflow :text="t('sign_in')" /></h1>
 			<div v-if="!authenticated && providerOptions.length > 1" class="provider-select">
 				<v-select v-model="providerSelect" inline :items="providerOptions" label />
 			</div>
@@ -87,7 +87,7 @@ useHead({
 
 <style lang="scss" scoped>
 h1 {
-	margin-bottom: 20px;
+	overflow: hidden;
 }
 
 .registration-wrapper {

app/src/views/private/components/project-info.vue

@@ -13,8 +13,8 @@ const descriptor = computed(() => serverStore.info?.project?.project_descriptor)
 	<div class="project-info">
 		<latency-indicator />
 		<div class="name-container">
-			<v-text-overflow placement="right" class="name" :text="name" />
-			<v-text-overflow v-if="descriptor" placement="right" class="descriptor" :text="descriptor" />
+			<v-text-overflow class="name" :text="name" placement="bottom" />
+			<v-text-overflow v-if="descriptor" class="descriptor" :text="descriptor" placement="bottom" />
 		</div>
 	</div>
 </template>
@@ -37,15 +37,14 @@ const descriptor = computed(() => serverStore.info?.project?.project_descriptor)
 		width: 100px;
 		margin-left: 12px;
 		line-height: 1.3;
+		margin-right: 8px;
 	}
 
 	.name {
-		margin-right: 8px;
 		font-family: var(--theme--navigation--project--font-family);
 	}
 
 	.descriptor {
-		display: block;
 		color: var(--theme--foreground-subdued);
 	}
 }

app/src/views/public/public-view.vue

@@ -65,8 +65,12 @@ const logoURL = computed<string | null>(() => {
 					<img src="./logo-light.svg" alt="Directus" class="directus-logo" />
 				</div>
 				<div class="title">
-					<h1 class="type-title">{{ info?.project?.project_name }}</h1>
-					<p class="subtitle">{{ info?.project?.project_descriptor ?? t('application') }}</p>
+					<h1 class="type-title"><v-text-overflow :text="info?.project?.project_name" placement="bottom" /></h1>
+					<v-text-overflow
+						class="subtitle"
+						:text="info?.project?.project_descriptor ?? t('application')"
+						placement="bottom"
+					/>
 				</div>
 			</div>
 
@@ -372,6 +376,7 @@ const logoURL = computed<string | null>(() => {
 				background-color: rgb(38 50 56 / 0.2);
 				border-radius: 6px;
 				backdrop-filter: blur(2px);
+				word-break: break-word;
 			}
 		}
 
@@ -395,6 +400,7 @@ const logoURL = computed<string | null>(() => {
 		.title {
 			margin-top: 2px;
 			margin-left: 16px;
+			overflow: hidden;
 
 			h1 {
 				font-weight: 700;
@@ -403,7 +409,6 @@ const logoURL = computed<string | null>(() => {
 			}
 
 			.subtitle {
-				width: 100%;
 				color: var(--theme--foreground-subdued);
 			}
 		}

contributors.yml

@@ -170,3 +170,4 @@
 - Khairo-kh
 - mmsardar
 - ubercj
+- Julias0