dont use flex for password positioning

jslib

@@ -1 +1 @@
-Subproject commit dc37528d223cd12f37297c80e6ad54ab68dfb109
+Subproject commit 2ef1b7d65c02f7f204a0bb5a46c28aa093be274d

src/app/app.module.ts

@@ -159,8 +159,8 @@ import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive
 import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive';
 import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive';
 import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive';
-import { FlexCopyDirective } from 'jslib/angular/directives/flex-copy.directive';
 import { InputVerbatimDirective } from 'jslib/angular/directives/input-verbatim.directive';
+import { SelectCopyDirective } from 'jslib/angular/directives/select-copy.directive';
 import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive';
 import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive';
 import { TrueFalseValueDirective } from 'jslib/angular/directives/true-false-value.directive';
@@ -267,7 +267,6 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ExportComponent,
         ExposedPasswordsReportComponent,
         FallbackSrcDirective,
-        FlexCopyDirective,
         FolderAddEditComponent,
         FooterComponent,
         FrontendLayoutComponent,
@@ -332,6 +331,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         ReusedPasswordsReportComponent,
         SearchCiphersPipe,
         SearchPipe,
+        SelectCopyDirective,
         SettingsComponent,
         ShareComponent,
         StopClickDirective,

src/app/tools/password-generator-history.component.html

@@ -9,9 +9,9 @@
             </div>
             <ul class="list-group list-group-flush" *ngIf="history.length">
                 <li class="list-group-item d-flex" *ngFor="let h of history">
-                    <div>
+                    <div class="password-row">
                         <div class="text-monospace password-wrapper" [innerHTML]="h.password | colorPassword"
-                            appFlexCopy></div>
+                            appSelectCopy></div>
                         <small class="text-muted">{{h.date | date:'medium'}}</small>
                     </div>
                     <div class="ml-auto">

src/app/tools/password-generator.component.html

@@ -2,7 +2,9 @@
     <h1>{{'passwordGenerator' | i18n}}</h1>
 </div>
 <div class="card card-password bg-light my-4">
-    <div class="card-body" [innerHTML]="password | colorPassword" appFlexCopy></div>
+    <div class="card-body">
+        <div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
+    </div>
 </div>
 <div class="form-group">
     <div class="form-check form-check-inline">

src/scss/styles.scss

@@ -407,8 +407,13 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 .password-wrapper {
-    display: flex !important;
+    word-break: break-all;
-    flex-wrap: wrap;
+    white-space: pre-wrap;
+    min-width: 0;
+}
+
+.password-row {
+    min-width: 0;
 }
 
 .password-number {