Bug 1330977 - Flex the labels of boxes that have Learn More links on them. r=mconley
This is to make sure that the text will wrap and not force the box to have its full width. Also set white-space:nowrap on the Learn More link to prevent the short text from breaking across lines since it is expected to be such a short string in most locales.
MozReview-Commit-ID: IhTKomU3WbW
--- a/browser/components/preferences/in-content/advanced.xul
+++ b/browser/components/preferences/in-content/advanced.xul
@@ -204,49 +204,49 @@
<tabpanel id="dataChoicesPanel" orient="vertical">
#ifdef MOZ_TELEMETRY_REPORTING
<groupbox>
<caption>
<checkbox id="submitHealthReportBox" label="&enableHealthReport.label;"
accesskey="&enableHealthReport.accesskey;"/>
</caption>
<vbox>
- <hbox class="indent">
- <label>&healthReportDesc.label;</label>
- <label id="FHRLearnMore"
+ <hbox class="indent" flex="1">
+ <label flex="1">&healthReportDesc.label;</label>
+ <label id="FHRLearnMore" flex="1"
class="learnMore text-link">&healthReportLearnMore.label;</label>
</hbox>
<hbox class="indent">
<groupbox flex="1">
<caption>
<checkbox id="submitTelemetryBox" preference="toolkit.telemetry.enabled"
label="&enableTelemetryData.label;"
accesskey="&enableTelemetryData.accesskey;"/>
</caption>
- <hbox class="indent">
- <label id="telemetryDataDesc">&telemetryDesc.label;</label>
- <label id="telemetryLearnMore"
+ <hbox class="indent" flex="1">
+ <label id="telemetryDataDesc" flex="1">&telemetryDesc.label;</label>
+ <label id="telemetryLearnMore" flex="1"
class="learnMore text-link">&telemetryLearnMore.label;</label>
</hbox>
</groupbox>
</hbox>
</vbox>
</groupbox>
#endif
#ifdef MOZ_CRASHREPORTER
<groupbox>
<caption>
<checkbox id="automaticallySubmitCrashesBox"
preference="browser.crashReports.unsubmittedCheck.autoSubmit"
label="&alwaysSubmitCrashReports.label;"
accesskey="&alwaysSubmitCrashReports.accesskey;"/>
</caption>
- <hbox class="indent">
- <label>&crashReporterDesc2.label;</label>
- <label id="crashReporterLearnMore"
+ <hbox class="indent" flex="1">
+ <label flex="1">&crashReporterDesc2.label;</label>
+ <label id="crashReporterLearnMore" flex="1"
class="learnMore text-link">&crashReporterLearnMore.label;</label>
</hbox>
</groupbox>
#endif
</tabpanel>
#endif
<!-- Network -->
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -38,20 +38,20 @@ treecol {
#blocklistsTree treechildren::-moz-tree-row {
min-height: 36px;
}
#selectionCol {
min-width: 26px;
}
-/* For the "learn more" links, line up after text */
.learnMore {
margin-inline-start: 1.5em;
font-weight: normal;
+ white-space: nowrap;
}
/* Category List */
#categories {
max-height: 100vh;
}