Noissue - Fixed: Button in filter list selection dialog is squashed

skin/mobile-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 179 matching lines @@
 }
 
 input:checked + .toggle-image
 {
   background-image: url(mobile/toggle.svg#on);
 }
 
 button
 {
   width: 100%;
-  height: 46px; /* equal to height of list item */
   border: none;
   font-weight: 600;
   text-transform: uppercase;
   color: #099DD1;
   background: none;
 }
 
 button.primary,
 button.secondary
 {
@@ skipping 20 matching lines @@
 {
   width: 36px;
   height: 36px;
   padding: 0;
   background-color: #099DD1;
   mask: url(mobile/trash.svg) center/19px no-repeat;
 }
 
 ul + button
 {
+  flex-shrink: 0;
   width: 100%;
-  padding: 0 20px; /* based on margin and padding of list item */
+  min-height: 46px; /* equal to min-height of list item */
+  padding: 15px 20px; /* based on margin and padding of list item */
   border: 1px solid #BBBBBB;
   text-align: start;
 }
 
 /* Dialogs */
 
 #dialog
 {
   display: flex;
   align-items: flex-start;
@@ skipping 108 matching lines @@
 }
 
 #dialog-recommended ul li.installed::before
 {
   background-color: #BBBBBB;
   mask: url(mobile/checkmark.svg) center/cover no-repeat;
 }
 
 #dialog-recommended > button
 {
-  flex-shrink: 0;

[saroyanm, 2017/09/14 13:45:40]

The button still is being squashed with this property, maybe you can padding for
that ? Or fixed height ?

[saroyanm, 2017/09/14 13:49:12]

Sorry, this was a cache error :/ Looks fine.

[saroyanm, 2017/09/14 13:57:53]

Deatil: But using Padding instead of Height might be still valid question,
considering the translations being long
something along the lines:

flex-shrink: 0;
height: auto;
padding: 10px 20px;

[Thomas Greiner, 2017/09/15 13:00:03]

You're right regarding longer texts.

Done. I made some different changes though to ensure that the button height will
never be lower than the one of the list items it refers to.

   border-width: 1px 0 0 0;
   text-align: center;
 }