Merge pull request #9 from ngxson/fix-firefox-scrollbar

Fix firefox scrollbar
2020-06-19 11:41:34 +02:00
parent c0b711a012 56a87460ce
commit 62784d049e
3 changed files with 29 additions and 7 deletions
@@ -1,6 +1,6 @@
 {
  "name": "simplelogin-extension",
-  "version": "1.2.0",
+  "version": "1.5.6",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -239,7 +239,7 @@
            <div v-for="alias in existing" v-bind:key="alias.id">
              <div class="p-2 my-2 border-top">
                <div class="d-flex">
-                  <div class="flex-grow-1 mr-2">
+                  <div class="flex-grow-1 mr-2 list-item-email">
                    <a
                      v-clipboard="() => alias.email"
                      v-clipboard:success="clipboardSuccessHandler"
@@ -247,8 +247,10 @@
                      v-b-tooltip.hover
                      title="Click to Copy"
                      class="cursor"
-                      >{{ alias.email | truncate(50, "...") }}</a
                    >
+                      {{ alias.email }}
+                    </a>
+                    <div class="list-item-email-fade" />
                  </div>
                  <div>
                    <button
@@ -764,8 +766,30 @@ em {
 .copy-btn {
  font-size: 0.6rem;
  line-height: 0.75;
+  position: absolute;
+  right: 0;
+  transform: translateX(-50%);
 }
 .cursor {
  cursor: pointer;
 }
+
+.list-item-email {
+  margin-right: 40px !important;
+  position: relative;
+  overflow: hidden;
+}
+
+.list-item-email > a {
+  white-space: nowrap;
+}
+
+.list-item-email-fade {
+  right: 0;
+  width: 30px;
+  height: 100%;
+  background: linear-gradient(to right, transparent, white);
+  top: 0;
+  position: absolute;
+}
 </style>
@@ -10,10 +10,8 @@
  <!-- Load some resources only in development environment -->
  <% } %>
 </head>
-<body>
-  <div id="app">
-
-  </div>
+<body style="overflow-x: hidden; padding-right: 10px;">
+  <div id="app"></div>
  <script src="popup.js"></script>
 </body>
 </html>