From 12f806449d034546f6f101853e9e10c35fed6141 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 15 Mar 2016 10:19:25 +0100
Subject: [PATCH] Prevent <select> from overflowing containers

---
 wcfsetup/install/files/style/layout/form.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index b77a534e81..3c0e707639 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -81,6 +81,15 @@ textarea {
 	}
 }
 
+select {
+	// The width is determined by the browser based upon the longest <option> contained,
+	// but this can cause the <select> to overflow the parent container. This is acceptable
+	// to some extent, but on mobile it can cause the entire site to have a horizontal
+	// scrollbar instead. Setting a `max-width` will cause the browser to respect the page
+	// boundaries and nicely wrap the displayed value instead.
+	max-width: 100%;
+}
+
 .selectDropdown {
 	position: relative;
 	
-- 
2.20.1