From 67f09184600f8458d734f969bd57f2d59c50d92f Mon Sep 17 00:00:00 2001
From: Anil Mandepudi <pichalite@users.noreply.github.com>
Date: Thu, 30 Aug 2018 11:00:30 -0700
Subject: [PATCH] Fixes #420 (#425)

* Fixes #420

* fix indent

* Update bottom-sheet.less

* Update bottom-sheet.less
---
 less/modules/bottom-sheet.less | 5 ++++-
 templates/popular.tpl          | 6 +++---
 templates/recent.tpl           | 4 ++--
 templates/unread.tpl           | 6 +++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/less/modules/bottom-sheet.less b/less/modules/bottom-sheet.less
index 546e537..8a47c34 100644
--- a/less/modules/bottom-sheet.less
+++ b/less/modules/bottom-sheet.less
@@ -23,7 +23,10 @@
 
         	li {
         	    a {
-        	        padding: 10px 20px;
+			padding: 10px 20px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
         	    }
 
         		&.divider {
diff --git a/templates/popular.tpl b/templates/popular.tpl
index fae8b86..2cc8305 100644
--- a/templates/popular.tpl
+++ b/templates/popular.tpl
@@ -14,7 +14,7 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
+		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
 				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
@@ -31,7 +31,7 @@
 			</ul>
 		</div>
 
-		<div class="btn-group pull-right <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
+		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 			{selectedFilter.name} <span class="caret"></span>
 			</button>
@@ -44,7 +44,7 @@
 			</ul>
 		</div>
 
-		<div class="btn-group pull-right <!-- IF !terms.length -->hidden<!-- ENDIF !terms.length -->">
+		<div class="btn-group pull-right bottom-sheet <!-- IF !terms.length -->hidden<!-- ENDIF !terms.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 			{selectedTerm.name} <span class="caret"></span>
 			</button>
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 83f1631..e03d676 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -14,7 +14,7 @@
 			<!-- ENDIF loggedIn -->
 		</div>
 
-		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
+		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet <!-- IF !categories.length -->hidden<!-- ENDIF !categories.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
 				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
@@ -31,7 +31,7 @@
 			</ul>
 		</div>
 
-		<div class="btn-group pull-right <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
+		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 			{selectedFilter.name} <span class="caret"></span>
 			</button>
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 01bc286..5a7f559 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -13,7 +13,7 @@
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF loggedIn -->
 		</div>
-		<div class="markread btn-group pull-right category-dropdown-container<!-- IF !topics.length --> hidden<!-- ENDIF !topics.length -->">
+		<div class="markread btn-group pull-right category-dropdown-container bottom-sheet<!-- IF !topics.length --> hidden<!-- ENDIF !topics.length -->">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				[[unread:mark_as_read]] <span class="caret"></span>
 			</button>
@@ -35,7 +35,7 @@
 			</ul>
 		</div>
 
-		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container">
+		<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><span class="fa-stack"><i style="color: {selectedCategory.bgColor};" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
 				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
@@ -52,7 +52,7 @@
 			</ul>
 		</div>
 
-		<div class="btn-group pull-right">
+		<div class="btn-group pull-right bottom-sheet">
 			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 			{selectedFilter.name} <span class="caret"></span>
 			</button>