fix(layout): let info tables wrap and give PHP extensions the full width

css/serverinfo-main.css

@@ -1,2 +1,2 @@
 /* extracted by css-entry-points-plugin */
-@import './main-B1Pt6YZg.chunk.css';
+@import './main-C_6xGBMP.chunk.css';

src/components/PhpExtensionsSection.vue

@@ -0,0 +1,29 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<SectionHeading :icon="Puzzle" :title="t('serverinfo', 'PHP extensions')" />
+	<div class="server-info__tag-wrapper">
+		<template v-if="extensions">
+			<span
+				v-for="ext in extensions"
+				:key="ext"
+				class="server-info__php-extension-tag">{{ ext }}</span>
+		</template>
+		<template v-else>
+			{{ t('serverinfo', 'Unable to list extensions') }}
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import Puzzle from 'vue-material-design-icons/Puzzle.vue'
+import SectionHeading from './SectionHeading.vue'
+
+defineProps<{
+	/** Loaded extensions, or null when the platform would not list them */
+	extensions: string[] | null
+}>()
+</script>

src/components/PhpSection.vue

@@ -37,22 +37,6 @@
 						{{ php.opcache_revalidate_freq }} {{ t('serverinfo', 'seconds') }}
 					</td>
 				</tr>
-				<tr>
-					<td>{{ t('serverinfo', 'Extensions:') }}</td>
-					<td class="info">
-						<div class="server-info__tag-wrapper">
-							<template v-if="php.extensions">
-								<span
-									v-for="ext in php.extensions"
-									:key="ext"
-									class="server-info__php-extension-tag">{{ ext }}</span>
-							</template>
-							<template v-else>
-								{{ t('serverinfo', 'Unable to list extensions') }}
-							</template>
-						</div>
-					</td>
-				</tr>
 				<tr v-if="phpinfo">
 					<td>{{ t('serverinfo', 'PHP Info:') }}</td>
 					<td>
@@ -164,7 +148,6 @@ defineProps<{
 		max_execution_time: number
 		upload_max_filesize: number
 		opcache_revalidate_freq: number
-		extensions: string[] | null
 	}
 	fpm: {
 		pool: string

src/main.css

@@ -278,6 +278,15 @@
 	width: 100%;
 }
 
+/* Core's reset sets `white-space: nowrap` on every table. A long value such as
+   the CPU model then cannot wrap: the table grows past its column and prints
+   over the section beside it. */
+.server-info-table table,
+.server-infos-table {
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 .server-info-table td {
 	padding: 6px;
 }

src/views/SettingsAdmin.vue

@@ -74,6 +74,10 @@
 					<div class="col col-6 col-m-12">
 						<DatabaseSection :database="staticData.database" />
 					</div>
+					<!-- Full width: the tag list is far too long for half a row -->
+					<div class="col col-12">
+						<PhpExtensionsSection :extensions="staticData.php.extensions" />
+					</div>
 				</div>
 			</div>
 
@@ -112,6 +116,9 @@
 					<div class="col col-6 col-m-12">
 						<SectionSkeleton />
 					</div>
+					<div class="col col-12">
+						<SectionSkeleton />
+					</div>
 				</div>
 			</div>
 		</template>
@@ -126,6 +133,7 @@ import DiskSection from '../components/DiskSection.vue'
 import MemoryChartSection from '../components/MemoryChartSection.vue'
 import MonitoringSection from '../components/MonitoringSection.vue'
 import NetworkSection from '../components/NetworkSection.vue'
+import PhpExtensionsSection from '../components/PhpExtensionsSection.vue'
 import PhpSection from '../components/PhpSection.vue'
 import SectionSkeleton from '../components/SectionSkeleton.vue'
 import SharesSection from '../components/SharesSection.vue'