Fix wide bravery panel to stop covering the webview (#11880)

* Set braveryPanel list width to zero

Fixes #11878

Auditors:

Test Plan:
1. Open https://chiebukuro.yahoo.co.jp/
2. Click the adblock count
3. Make sure panel width does not change

* Avoid a very long domain name from covering the webview

Auditors:

Test Plan:
1. Open https://longextendedsubdomainnamewithoutdashesinordertotestwordwrapping.badssl.com/
2. Open the wide bravery panel
3. Make sure the panel does not cover the webview

app/renderer/components/main/braveryPanel.js

@@ -644,7 +644,12 @@ const displayHost = {
   fontWeight: 'normal',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  overflow: 'hidden'
+  overflow: 'hidden',
+
+  // See #11878: avoid a very long domain drom covering the webview.
+  // The value should maintain the panel width until 0.19.
+  // https://github.com/brave/browser-laptop/blob/0.19.x/app/renderer/components/main/braveryPanel.js#L708
+  maxWidth: '320px'
 }
 const editGlobalMarginBottom = '.25rem'
 
@@ -911,7 +916,11 @@ const styles = StyleSheet.create({
   braveryPanel__body__ul__li: {
     listStyleType: 'none',
     padding: '10px 0',
-    cursor: 'text'
+    cursor: 'text',
+
+    // #9839 and #11878: Avoid the panel width from increasing.
+    width: 0,
+    whiteSpace: 'nowrap'
   },
   braveryPanel__body__hr: {
     background: globalStyles.braveryPanel.body.hr.background,
@@ -964,10 +973,6 @@ const styles = StyleSheet.create({
   braveryPanel_compact__body__ul__li: {
     padding: '5px 0',
 
-    // #9839: Avoid the panel width from increasing
-    width: 0,
-    whiteSpace: 'nowrap',
-
     ':first-of-type': {
       paddingTop: 0
     },