Update Snackbar to not allow text to overflow.

CSS of Snackbar added in App.vue to break long words into several lines so that it
all fits within the snackbar when error message is displayed.

Bug: 162502395

Test: Add a file on Winscope homepage with extremely long filename that pops an error
(unaccepted file type) and then see the snackbar with text not
overflowing.

Change-Id: I21c8881963fe22705f0c39d9ab6207ccbbfa90b0

tools/winscope/src/App.vue

@@ -279,4 +279,18 @@ a {
 .data-view-container {
   padding: 25px 20px 0 20px;
 }
+
+.snackbar-break-words {
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    padding: 10px 10px 10px 10px;
+  }
 </style>

tools/winscope/src/DataInput.vue

@@ -91,7 +91,7 @@
       :md-active.sync="showSnackbar"
       md-persistent
     >
-      <span style="white-space: pre-line;">{{ snackbarText }}</span>
+      <p class="snackbar-break-words">{{ snackbarText }}</p>
       <div @click="hideSnackbarMessage()">
         <md-button class="md-icon-button">
           <md-icon style="color: white">close</md-icon>
@@ -137,7 +137,7 @@ export default {
   },
   methods: {
     showSnackbarMessage(message, duration) {
-      this.snackbarText = message;
+      this.snackbarText = '\n' + message + '\n';
       this.snackbarDuration = duration;
       this.showSnackbar = true;
     },
@@ -534,4 +534,4 @@ export default {
   },
 };
 
-</script>
+</script>