Fixed: overflowing tables on small screens (#3819)

* fix

* overflow-x

* a better fix, that fix all tables

* Revert "a better fix, that fix all tables"

This reverts commit 3bc94473474607415e30e2056899975421fb8a01.

* user list table with wrapper

* scrolling table: extension table

app/views/extension/index.phtml

@@ -34,35 +34,37 @@
 
 	<?php if (!empty($this->available_extensions)) { ?>
 		<h2><?= _t('admin.extensions.community') ?></h2>
-		<table>
-			<tr>
-				<th><?= _t('admin.extensions.name') ?></th>
-				<th><?= _t('admin.extensions.version') ?></th>
-				<th><?= _t('admin.extensions.author') ?></th>
-				<th><?= _t('admin.extensions.description') ?></th>
-			</tr>
-			<?php foreach ($this->available_extensions as $ext) { ?>
+		<div class="table-wrapper">
+			<table>
 				<tr>
-					<td><a href="<?= $ext['url'] ?>" target="_blank"><?= $ext['name'] ?></a></td>
-					<td><?= $ext['version'] ?></td>
-					<td><?= $ext['author'] ?></td>
-					<td>
-						<?= $ext['description'] ?>
-						<?php if (isset($this->extensions_installed[$ext['name']])) { ?>
-							<?php if (version_compare($this->extensions_installed[$ext['name']], $ext['version']) >= 0) { ?>
-								<span class="alert alert-success">
-									<?= _t('admin.extensions.latest') ?>
-								</span>
-							<?php } elseif ($this->extensions_installed[$ext['name']] != $ext['version']) { ?>
-								<span class="alert alert-warn">
-									<?= _t('admin.extensions.update') ?>
-								</span>
-							<?php } ?>
-						<?php } ?>
-					</td>
+					<th><?= _t('admin.extensions.name') ?></th>
+					<th><?= _t('admin.extensions.version') ?></th>
+					<th><?= _t('admin.extensions.author') ?></th>
+					<th><?= _t('admin.extensions.description') ?></th>
 				</tr>
-			<?php } ?>
-		</table>
+				<?php foreach ($this->available_extensions as $ext) { ?>
+					<tr>
+						<td><a href="<?= $ext['url'] ?>" target="_blank"><?= $ext['name'] ?></a></td>
+						<td><?= $ext['version'] ?></td>
+						<td><?= $ext['author'] ?></td>
+						<td>
+							<?= $ext['description'] ?>
+							<?php if (isset($this->extensions_installed[$ext['name']])) { ?>
+								<?php if (version_compare($this->extensions_installed[$ext['name']], $ext['version']) >= 0) { ?>
+									<span class="alert alert-success">
+										<?= _t('admin.extensions.latest') ?>
+									</span>
+								<?php } elseif ($this->extensions_installed[$ext['name']] != $ext['version']) { ?>
+									<span class="alert alert-warn">
+										<?= _t('admin.extensions.update') ?>
+									</span>
+								<?php } ?>
+							<?php } ?>
+						</td>
+					</tr>
+				<?php } ?>
+			</table>
+		</div>
 	<?php } ?>
 </div>
 

app/views/user/manage.phtml

@@ -74,34 +74,36 @@
 	</form>
 
 	<legend><?= _t('admin.user.list'); ?></legend>
-	<table id="user-list">
-		<thead>
-			<tr>
-				<th><?= _t('admin.user.username') ?></th>
-				<th><?= _t('admin.user.enabled') ?></th>
-				<th><?= _t('admin.user.is_admin') ?></th>
-				<th><?= _t('admin.user.email') ?></th>
-				<th><?= _t('admin.user.language') ?></th>
-				<th><?= _t('admin.user.feed_count') ?></th>
-				<th><?= _t('admin.user.article_count') ?></th>
-				<th><?= _t('admin.user.database_size') ?></th>
-				<th><?= _t('admin.user.last_user_activity') ?></th>
-			</tr>
-		</thead>
-		<tbody>
-			<?php foreach ($this->users as $username => $values) : ?>
-				<tr <?= $values['is_default'] ? 'class="default-user"' : '' ?>>
-					<td><a href="<?= _url('user', 'details', 'username', $username) ?>"><?= $username ?></a></td>
-					<td><?= $values['enabled'] ? '✔' : ' ' ?></td>
-					<td><?= $values['is_admin'] ? '✔' : ' ' ?></td>
-					<td><?= $values['mail_login'] ?></td>
-					<td><?= _t("gen.lang.{$values['language']}") ?></td>
-					<td><?= format_number($values['feed_count']) ?></td>
-					<td><?= format_number($values['article_count']) ?></td>
-					<td><?= format_bytes($values['database_size']) ?></td>
-					<td><?= $values['last_user_activity'] ?></td>
+	<div class="table-wrapper">
+		<table id="user-list">
+			<thead>
+				<tr>
+					<th><?= _t('admin.user.username') ?></th>
+					<th><?= _t('admin.user.enabled') ?></th>
+					<th><?= _t('admin.user.is_admin') ?></th>
+					<th><?= _t('admin.user.email') ?></th>
+					<th><?= _t('admin.user.language') ?></th>
+					<th><?= _t('admin.user.feed_count') ?></th>
+					<th><?= _t('admin.user.article_count') ?></th>
+					<th><?= _t('admin.user.database_size') ?></th>
+					<th><?= _t('admin.user.last_user_activity') ?></th>
 				</tr>
-			<?php endforeach ?>
-		</tbody>
-	</table>
+			</thead>
+			<tbody>
+				<?php foreach ($this->users as $username => $values) : ?>
+					<tr <?= $values['is_default'] ? 'class="default-user"' : '' ?>>
+						<td><a href="<?= _url('user', 'details', 'username', $username) ?>"><?= $username ?></a></td>
+						<td><?= $values['enabled'] ? '✔' : ' ' ?></td>
+						<td><?= $values['is_admin'] ? '✔' : ' ' ?></td>
+						<td><?= $values['mail_login'] ?></td>
+						<td><?= _t("gen.lang.{$values['language']}") ?></td>
+						<td><?= format_number($values['feed_count']) ?></td>
+						<td><?= format_number($values['article_count']) ?></td>
+						<td><?= format_bytes($values['database_size']) ?></td>
+						<td><?= $values['last_user_activity'] ?></td>
+					</tr>
+				<?php endforeach ?>
+			</tbody>
+		</table>
+	</div>
 </div>

p/themes/base-theme/template.css

@@ -173,6 +173,10 @@ button.as-link[disabled] {
 }
 
 /*=== Tables */
+.table-wrapper {
+	overflow-x: auto;
+}
+
 table {
 	max-width: 100%;
 }
@@ -208,6 +212,7 @@ td.numeric {
 .form-group .group-controls {
 	min-width: 250px;
 	margin: 0 0 0 220px;
+	overflow-x: auto;
 }
 
 .form-group .group-controls .control {

p/themes/base-theme/template.rtl.css

@@ -208,6 +208,7 @@ td.numeric {
 .form-group .group-controls {
 	min-width: 250px;
 	margin: 0 220px 0 0;
+	overflow-x: auto;
 }
 
 .form-group .group-controls .control {