diff options
| -rw-r--r-- | gui/default/assets/css/overrides.css | 7 | ||||
| -rw-r--r-- | gui/default/index.html | 26 |
2 files changed, 21 insertions, 12 deletions
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css index b773cf000..043e6a924 100644 --- a/gui/default/assets/css/overrides.css +++ b/gui/default/assets/css/overrides.css @@ -189,6 +189,13 @@ input[type="checkbox"].extended-attributes-filter-rule-checkbox { word-break: break-all; } +/* Break up long words in paragraphs only if necessary to prevent text overflow. */ +.overflow-break-word { + overflow-wrap: break-word; + /* Legacy name alias */ + word-wrap: break-word; +} + .folder-advanced { padding: 1rem; margin-bottom: 15px; diff --git a/gui/default/index.html b/gui/default/index.html index 12216d485..26f4e8655 100644 --- a/gui/default/index.html +++ b/gui/default/index.html @@ -404,9 +404,9 @@ <span class="hidden-xs">{{folderStatusText(folder)}}</span> <span ng-switch-when="scanning" ng-if="scanPercentage(folder.id) != undefined">({{scanPercentage(folder.id) | percent}})</span> <span ng-switch-when="syncing">({{syncPercentage(folder.id) | percent}}, {{model[folder.id].needBytes | binary}}B)</span> - <span class="inline-icon"> + <span class="inline-icon"> <span class="visible-xs fa fa-fw {{folderStatusIcon(folder)}}" aria-label="{{folderStatusText(folder)}}"></span> - </span> + </span> </div> <div class="panel-title-text"> <span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span> @@ -585,12 +585,13 @@ </tr> <tr> <th><span class="fas fa-fw fa-share-alt"></span> <span translate>Shared With</span></th> - <td class="text-right no-overflow-ellipse word-break-all"> + <td class="text-right no-overflow-ellipse overflow-break-word"> <span ng-repeat="device in otherDevices(folder.devices)"> - <span ng-switch="completion[device.deviceID][folder.id].remoteState"> - <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup><span ng-if="!$last">,</span></span> - <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup><span ng-if="!$last">,</span></span> - <span ng-switch-default>{{deviceName(devices[device.deviceID])}}<span ng-if="!$last">,</span></span> + <span ng-switch="completion[device.deviceID][folder.id].remoteState"><!-- Avoid stray space... + --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup></span><!-- Avoid stray space... + --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup></span><!-- Avoid stray space... + --><span ng-switch-default>{{deviceName(devices[device.deviceID])}}</span><!-- Avoid stray space... + --><span ng-if="!$last">,</span> </span> </span> </td> @@ -940,12 +941,13 @@ </tr> <tr ng-if="deviceFolders(deviceCfg).length > 0"> <th><span class="fas fa-fw fa-folder"></span> <span translate>Folders</span></th> - <td class="text-right no-overflow-ellipse word-break-all"> + <td class="text-right no-overflow-ellipse overflow-break-word"> <span ng-repeat="folderID in deviceFolders(deviceCfg)"> - <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"> - <span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup><span ng-if="!$last">,</span></span> - <span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup><span ng-if="!$last">,</span></span> - <span ng-switch-default>{{folderLabel(folderID)}}<span ng-if="!$last">,</span></span> + <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"><!-- Avoid stray space... + --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup></span><!-- Avoid stray space... + --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup></span><!-- Avoid stray space... + --><span ng-switch-default>{{folderLabel(folderID)}}</span><!-- Avoid stray space... + --><span ng-if="!$last">,</span> </span> </span> </td> |