scanning: Reduce width of done section title text

In certain languages the done title text needs to wrap, so we reduce the
width to align with the buttons underneath.

http://screen/5XLCiXVLPV6zxXS

Bug: 1059779
Change-Id: I576acceed8eae33a4486afe8b9aee8865bf4ee7c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2593719Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837834}

chrome/test/data/webui/chromeos/scanning/scan_done_section_test.js

@@ -37,7 +37,7 @@ export function scanDoneSectionTest() {
 
   test('initializeScanDoneSection', () => {
     assertTrue(!!scanDoneSection.$.title);
-    assertTrue(!!scanDoneSection.$$('.done-button-container'));
+    assertTrue(!!scanDoneSection.$$('#doneButtonContainer'));
   });
 
   test('pageNumberUpdatesTitleText', () => {

chromeos/chromeos_strings.grd

@@ -564,8 +564,8 @@ Try tapping the mic to ask me anything.
       </message>
       <message name="IDS_SCANNING_APP_FILE_SAVED_TEXT" desc="The text displayed in the Scanning App when a scan job is completed and the file is saved.">
         {COUNT, plural,
-        =1 {Scanned file saved!}
-        other {Scanned files saved!}}
+        =1 {Scanned file saved}
+        other {Scanned files saved}}
       </message>
       <message name="IDS_SCANNING_APP_DONE_BUTTON_TEXT" desc="The text displayed for the button the user clicks to return to the intial Scanning App page after a scan job is completed.">
         Done

chromeos/chromeos_strings_grd/IDS_SCANNING_APP_FILE_SAVED_TEXT.png.sha1

-707171624ee868fa8e08fe28f1d65e5d667c9224
+337906cc5e8ced8334d91f9f5eb5c1e898ed5fe6
\ No newline at end of file

chromeos/components/scanning/resources/scan_done_section.html

@@ -7,6 +7,12 @@
     margin-top: 0;
   }
 
+  .container,
+  #doneButtonContainer,
+  #titleContainer {
+    width: 272px;
+  }
+
   .container {
     @apply --scanning-done-section-option-font;
     align-items: center;
@@ -18,16 +24,15 @@
     margin-inline-start: 32px;
     margin-top: 0;
     padding-inline-end: 16px;
-    width: 272px;
   }
 
   #checkMarkIcon {
-    height: 20px;
     margin-inline-end: 12px;
-    width: 20px;
+    min-height: 24px;
+    min-width: 24px;
   }
 
-  .done-button-container {
+  #doneButtonContainer {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 0;
@@ -35,7 +40,6 @@
     margin-inline-start: 32px;
     margin-top: 32px;
     padding-inline-end: 16px;
-    width: 272px;
   }
 
   #title {
@@ -72,7 +76,7 @@
       on-click="showFileInLocation_" aria-labelledby="showFileLocationLabel">
   </cr-icon-button>
 </div>
-<div class="done-button-container">
+<div id="doneButtonContainer">
   <cr-button id="doneButton" class="action-button"
       on-click="onDoneClick_">
     [[i18n('doneButtonText')]]