fix(settings): guard against non-APIError in logs retention error state

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -1,7 +1,8 @@
 .billingContainer {
+	margin-bottom: var(--spacing-20);
 	padding-top: 36px;
 	width: 90%;
-	margin: 0 auto var(--spacing-20);
+	margin: 0 auto;
 
 	.pageHeader {
 		margin-bottom: var(--spacing-8);

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -1,6 +1,6 @@
 .license-key-callout {
 	margin: var(--spacing-4) var(--spacing-6);
-	width: auto !important;
+	width: auto;
 
 	.license-key-callout__description {
 		display: flex;

frontend/src/container/GeneralSettings/__tests__/index.test.tsx

@@ -0,0 +1,41 @@
+import { useQueries } from 'react-query';
+import { render, screen } from 'tests/test-utils';
+
+import GeneralSettings from '../index';
+
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQueries: jest.fn(),
+}));
+
+const baseQueryResult = {
+	isError: false,
+	isLoading: false,
+	isFetching: false,
+	isSuccess: true,
+	data: undefined,
+	error: null,
+	refetch: jest.fn(),
+};
+
+describe('GeneralSettings index', () => {
+	it('renders fallback message when logs query fails with a non-APIError', () => {
+		(useQueries as jest.Mock).mockReturnValue([
+			{ ...baseQueryResult },
+			{ ...baseQueryResult },
+			{
+				...baseQueryResult,
+				isError: true,
+				isSuccess: false,
+				error: new TypeError(
+					"Cannot read properties of undefined (reading 'code')",
+				),
+			},
+			{ ...baseQueryResult },
+		]);
+
+		render(<GeneralSettings />);
+
+		expect(screen.getByText('something_went_wrong')).toBeInTheDocument();
+	});
+});

frontend/src/container/GeneralSettings/index.tsx

@@ -76,7 +76,9 @@ function GeneralSettings(): JSX.Element {
 	if (getRetentionPeriodLogsApiResponse.isError || getDisksResponse.isError) {
 		return (
 			<Typography>
-				{(getRetentionPeriodLogsApiResponse.error as APIError).getErrorMessage() ||
+				{(getRetentionPeriodLogsApiResponse.error instanceof APIError
+					? getRetentionPeriodLogsApiResponse.error.getErrorMessage()
+					: undefined) ||
 					getDisksResponse.data?.error ||
 					t('something_went_wrong')}
 			</Typography>

frontend/src/container/SideNav/SideNav.styles.scss

@@ -1135,9 +1135,17 @@
 
 .settings-dropdown,
 .help-support-dropdown {
-	.user-settings-dropdown-logout-section {
-		color: var(--danger-background);
-		pointer-events: auto;
+	.ant-dropdown-menu-item {
+		min-height: 32px;
+
+		.ant-dropdown-menu-title-content {
+			color: var(--l1-foreground) !important;
+		}
+
+		.user-settings-dropdown-logout-section {
+			color: var(--danger-background);
+			pointer-events: auto;
+		}
 	}
 }
 

frontend/src/pages/Settings/Settings.styles.scss

@@ -1,12 +1,8 @@
 .settings-page {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
+	max-height: 100vh;
 	overflow: hidden;
 
 	.settings-page-header {
-		flex-shrink: 0;
 		border-bottom: 1px solid var(--l1-border);
 		background: var(--l1-background);
 		backdrop-filter: blur(20px);
@@ -28,14 +24,13 @@
 	}
 
 	.settings-page-content-container {
-		flex: 1;
-		min-height: 0;
 		display: flex;
 		flex-direction: row;
-		align-items: stretch;
+		align-items: flex-start;
 
 		.settings-page-sidenav {
 			width: 240px;
+			height: calc(100vh - 48px);
 			border-right: 1px solid var(--l1-border);
 			background: var(--l1-background);
 			padding-top: var(--padding-1);
@@ -79,6 +74,7 @@
 
 		.settings-page-content {
 			flex: 1;
+			height: calc(100vh - 48px);
 			background: var(--l1-background);
 			padding: 10px 8px;
 			overflow-y: auto;