Use border-box everywhere and use svelte loop keying

res/include/style/layout.css

@@ -48,6 +48,9 @@
 a > svg { vertical-align: middle; }
 
 /* Page rendering configuration */
+*, *::before, *::after {
+	box-sizing: border-box;
+}
 html, body { overflow-x: hidden; }
 body{
 	margin: 0;
@@ -106,7 +109,6 @@ body, .checkers {
 	background-color: #1c1c1c;
 	background-color: var(--layer_1_color);
 	padding: 20px 0 0.5em 0;
-	box-sizing: border-box;
 	overflow-y: auto;
 	overflow-x: hidden;
 	text-align: left;
@@ -147,7 +149,6 @@ body, .checkers {
 	background-color: #212121;
 	background-color: var(--layer_2_color);
 	box-shadow: 1px 1px 12px 0 var(--shadow_color);
-	box-sizing: border-box;
 	clear: both;
 }
 .limit_width {
@@ -157,7 +158,6 @@ body, .checkers {
 	width: 100%;
 	height: auto;
 	padding: 0;
-	box-sizing: border-box;
 	text-align: left;
 	clear: both;
 }
@@ -171,7 +171,6 @@ body, .checkers {
 .page_navigation a {
 	float: none;
 	display: block;
-	box-sizing: border-box;
 	color: #b2b2b2; /* Fallback */
 	color: var(--text_color);
 	text-align: center;
@@ -213,7 +212,6 @@ body, .checkers {
 	position: relative;
 	width: auto;
 	height: auto;
-	box-sizing: border-box;
 	overflow: hidden;
 	text-align: center;
 	padding: 4px;
@@ -344,7 +342,6 @@ tr > td, tr > th {padding: 0.3em 0.6em;}
 @media(max-width: 30em) {
 	/* Forms will be stacked on small screens */
 	tr.form > td {
-		box-sizing: border-box;
 		float: left;
 		width: 100%;
 		padding: 0.5em;
@@ -359,7 +356,6 @@ pre {
 
 .file_button{
 	position: relative;
-	box-sizing: border-box;
 	width: 400px;
 	max-width: 90%;
 	height: 3.6em;
@@ -435,7 +431,6 @@ input[type="button"],
 input[type="color"],
 select {
 	display: inline-block;
-	box-sizing: border-box;
 	border-radius: 8px;
 	border: none;
 	margin: 3px;
@@ -513,7 +508,6 @@ select:disabled , select.disabled {
 	overflow-x: auto;
 	overflow-y: hidden;
 	white-space: nowrap;
-	box-sizing: border-box;
 	text-align: center;
 	background-color: var(--layer_1_color);
 	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
@@ -546,7 +540,6 @@ input[type="date"]{
 	display: inline-block;
 	margin: 3px; /* Same as button, to make them align nicely */
 	border: none;
-	box-sizing: border-box;
 	border-radius: 8px;
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 1px 1px 4px -2px var(--shadow_color);

res/include/style/modal.css

@@ -21,7 +21,6 @@
 	left: 50%;
 	transform: translate(-50%, -20%);
 	padding: 0;
-	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
 	border-radius: 20px 20px 8px 8px;

res/static/misc/pdf-viewer/web/viewer.css

@@ -118,7 +118,6 @@
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
   background-color: rgba(0, 54, 255, 0.13);
   border: 1px solid transparent;
-  box-sizing: border-box;
   font-size: 9px;
   height: 100%;
   margin: 0;
@@ -298,7 +297,6 @@
   text-align: inherit;
   text-decoration: inherit;
   vertical-align: inherit;
-  box-sizing: border-box;
   background: transparent;
 }
 
@@ -1538,7 +1536,6 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
      -moz-user-select: none;
           user-select: none;
   cursor: default;
-  box-sizing: border-box;
 }
 
 html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
@@ -1840,7 +1837,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
   min-width: 100%;
   white-space: normal;
   border-radius: 0;
-  box-sizing: border-box;
 }
 html[dir="ltr"] .secondaryToolbarButton {
   padding-left: 36px;
@@ -2420,7 +2416,6 @@ html[dir="rtl"] #documentPropertiesOverlay .row > * {
   background-color: rgba(255, 255, 0, 0.1);
   color: rgba(0, 0, 0, 1);
   border: solid 1px rgba(255, 0, 0, 0.5);
-  box-sizing: border-box;
 }
 
 #viewer.textLayer-hover .textLayer span:hover {

svelte/src/admin_panel/AbuseReporters.svelte

@@ -144,7 +144,7 @@ onMount(get_reporters);
 				<td>Created</td>
 				<td></td>
 			</tr>
-			{#each reporters as reporter}
+			{#each reporters as reporter (reporter.email)}
 				<tr>
 					<td>{reporter.email}</td>
 					<td>{reporter.name}</td>

svelte/src/admin_panel/AbuseReports.svelte

@@ -109,14 +109,14 @@ onMount(() => {
 		</div>
 
 		<h2>Pending</h2>
-		{#each reports_pending as report}
+		{#each reports_pending as report (report.id)}
 			{#if report.status === "pending"}
 			<AbuseReport report={report} on:refresh={get_reports}/>
 			{/if}
 		{/each}
 
 		<h2>Resolved</h2>
-		{#each reports_processed as report}
+		{#each reports_processed as report (report.id)}
 			{#if report.status !== "pending"}
 			<AbuseReport report={report} on:refresh={get_reports}/>
 			{/if}

svelte/src/admin_panel/IPBans.svelte

@@ -149,7 +149,7 @@ onMount(get_bans);
 				<td>Offences</td>
 				<td></td>
 			</tr>
-			{#each rows as row}
+			{#each rows as row (row.address)}
 				<tr>
 					<td>{row.address}</td>
 					<td>{row.reason}</td>

svelte/src/file_viewer/GalleryView.svelte

@@ -110,7 +110,7 @@ const drop = (e, index) => {
 </script>
 
 <div class="gallery">
-	{#each list.files as file, index (file)}
+	{#each list.files as file, index (file.id)}
 		<div
 			class="file"
 			on:click={() => {click_file(index)}}
@@ -148,16 +148,14 @@ const drop = (e, index) => {
 <style>
 .gallery{
 	padding: 16px;
-	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 }
 .file{
 	position: relative;
-	box-sizing: border-box;
 	width: 200px;
-	max-width: 40%;
+	max-width: 45%;
 	height: 200px;
 	margin: 8px;
 	padding: 0;

svelte/src/file_viewer/viewers/Text.svelte

@@ -115,7 +115,6 @@ const code = () => {
 	font-size: 0.9em;
 	line-height: 1.5em;
 	padding: 5px 5px 5px 20px;
-	box-sizing: border-box;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -215,7 +215,6 @@ const toggle_select = () => {
 	width: 100%;
 	margin: 16px 0 0 0;
 	padding: 0;
-	box-sizing: border-box;
 	justify-content: center;
 }
 .toolbar > * { flex: 0 0 auto; }
@@ -237,7 +236,6 @@ const toggle_select = () => {
 	text-align: left;
 	background-color: var(--layer_1_color);
 	box-shadow: 1px 1px 5px var(--shadow_color);
-	box-sizing: border-box;
 	border-collapse: collapse;
 }
 .directory > * { display: table-row; }
@@ -247,7 +245,6 @@ const toggle_select = () => {
 	text-decoration: none;
 	color: var(--text-color);
 	padding: 6px;
-	box-sizing: border-box;
 }
 .directory :global(.node:not(:last-child)) {
 	border-bottom: 1px solid var(--layer_2_color);

svelte/src/home_page/HomePage.svelte

@@ -564,7 +564,6 @@ const keydown = (e) => {
 .instruction {
 	border-top: 1px solid var(--layer_2_color_border);
 	border-bottom: 1px solid var(--layer_2_color_border);
-	box-sizing: border-box;
 	margin: 1.5em 0;
 	padding: 5px;
 }
@@ -574,7 +573,6 @@ const keydown = (e) => {
 	line-height: 1em;
 	text-align: center;
 	display: inline-block;
-	box-sizing: border-box;
 	background-color: var(--highlight_color);
 	color: var(--highlight_text_color);
 	border-radius: 30px;
@@ -588,7 +586,6 @@ const keydown = (e) => {
 	margin: 0.1em;
 	font-size: 1.5em;
 	display: inline;
-	box-sizing: border-box;
 	vertical-align: middle;
 }
 .stats_box {

svelte/src/home_page/UploadProgressBar.svelte

@@ -235,7 +235,6 @@ const add_upload_history = id => {
 
 .upload_task{
 	position: relative;
-	box-sizing: border-box;
 	width: 440px;
 	max-width: 95%;
 	height: 4em;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -353,7 +353,6 @@ const node_click = (index) => {
 	display: inline-block;
 	margin: 4px 10px;
 	padding: 4px;
-	box-sizing: border-box;
 	border-bottom: 1px solid var(--input_color);
 	cursor: pointer;
 }
@@ -375,12 +374,8 @@ const node_click = (index) => {
 	padding: 0;
 	overflow-x: auto;
 	text-align: left;
-	box-sizing: border-box;
 }
 #node_container {
-	/* Required because we use padding for moving the nodes down when items
-	above are out of view*/
-	box-sizing: border-box;
 	display: block;
 	min-width: 850px;
 }
@@ -402,7 +397,6 @@ const node_click = (index) => {
 	control over the size.
 	Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
 	margin: 0;
-	box-sizing: border-box;
 	color: var(--text_color);
 	text-decoration: none;
 }
@@ -420,14 +414,12 @@ const node_click = (index) => {
 	overflow: hidden;
 	margin: auto 10px;
 	padding: 4px;
-	box-sizing: border-box;
 	display: inline-block;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 .node > div > span {
 	margin: auto;
-	box-sizing: border-box;
 	display: block;
 	text-overflow: ellipsis;
 	white-space: nowrap;

svelte/src/user_home/APIKeys.svelte

@@ -121,7 +121,7 @@ const logout = async (key) => {
 				<td>IP address</td>
 				<td></td>
 			</tr>
-			{#each rows as row}
+			{#each rows as row (row.auth_key)}
 				<tr style="border-bottom: none;">
 					<td>{row.auth_key}</td>
 					<td>{formatDate(row.creation_time, true, true, false)}</td>

svelte/src/util/Modal.svelte

@@ -84,7 +84,6 @@ const keydown = e => {
 	padding: 0;
 	border-radius: 20px 20px 8px 8px;
 	overflow: hidden;
-	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
 }