Fixed: Styles: Trimmed chars in history items

(#602)

src/styles/themes/compact/sidebar/panel.history.styl

@@ -42,7 +42,8 @@
 
 .HistoryPanel .item
   position: relative
-  padding: 1px 0 4px
+  padding: 1px 0 0
+  height: 27px
   &:before
     content: ''
     position: absolute
@@ -63,15 +64,15 @@
   .line
     position: relative
     display: flex
+    height: 100%
     align-items: center
-    margin: 1px 0 0
 
   .fav
     position: relative
     width: 16px
     height: 16px
     flex-shrink: 0
-    margin: 3px 0 0 4px
+    margin: 0 0 0 4px
     cursor: pointer
     > svg, > img
       position: absolute
@@ -89,7 +90,7 @@
 
   .inline-info
     position: relative
-    margin: 5px 3px 0 4px
+    margin: 0 3px 0 4px
     font-size: rem(12)
     color: var(--frame-fg)
     white-space: nowrap
@@ -100,8 +101,7 @@
   .title
     position: relative
     width: 100%
-    height: 16px
-    margin: 3px 0 0 3px
+    margin: 0 0 1px 4px
     font-size: rem(15)
     color: var(--frame-fg)
     white-space: nowrap

src/styles/themes/plain/sidebar/panel.history.styl

@@ -40,7 +40,7 @@
 .HistoryPanel .item
   position: relative
   margin: 0 0 1px
-  padding: 2px 0 5px
+  height: 24px
   background-color: var(--toolbar-bg)
   box-shadow: inset 1px 1px 0 0 var(--border-flare), 0 0 3px 0 #00000016
   border-radius: var(--element-roundness)
@@ -65,14 +65,15 @@
   .line
     position: relative
     display: flex
+    height: 100%
     align-items: center
 
   .fav
     position: relative
     width: 16px
     height: 16px
     flex-shrink: 0
-    margin: 3px 0 0 4px
+    margin: 0 0 0 4px
     cursor: pointer
     > svg, > img
       position: absolute
@@ -90,7 +91,7 @@
 
   .inline-info
     position: relative
-    margin: 5px 3px 0 5px
+    margin: 1px 3px 0 5px
     font-size: rem(12)
     color: var(--toolbar-fg)
     white-space: nowrap
@@ -101,41 +102,14 @@
   .title
     position: relative
     width: 100%
-    height: 16px
-    margin: 3px 0 0 5px
+    margin: 0 0 1px 5px
     font-size: rem(15)
     color: var(--toolbar-fg)
     white-space: nowrap
     overflow: hidden
     transition: transform var(--d-fast), color var(--d-fast)
     mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)
 
-  .info
-    position: relative
-    width: 100%
-    margin: 2px 0 0 5px
-    font-size: rem(12)
-    color: var(--toolbar-fg)
-    white-space: pre
-    overflow: hidden
-    mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)
-    opacity: .7
-
-  .type
-    position: relative
-    width: 12px
-    height: 12px
-    flex-shrink: 0
-    margin: 4px 2px 0 6px
-    > svg
-      position: absolute
-      top: 0
-      left: 0
-      width: 12px
-      height: 12px
-      fill: var(--toolbar-fg)
-      opacity: .7
-
 .HistoryPanel .history-groups .LoadingDots
   height: 36px
 

src/styles/themes/proton/sidebar/panel.history.styl

@@ -41,35 +41,37 @@
 
 .HistoryPanel .item
   position: relative
-  margin: 0
-  padding: 2px 0 6px
+  padding: 1px 0 0
+  height: 29px
   &:before
     content: ''
     position: absolute
     top: 1px
-    left: 1px
-    width: calc(100% - 2px)
+    left: 2px
+    width: calc(100% - 4px)
     height: calc(100% - 2px)
     border-radius: 4px
   &:hover:before
     background-color: var(--hover-bg)
   &:active
     background-color: var(--clicked-bg)
     box-shadow: inset 0 0 0 1px #00000012
-  &[data-sel="true"]
+  &[data-sel="true"]:before
     background-color: var(--selected-bg)
+    box-shadow: inset 0 0 0 1px var(--selected-border)
 
   .line
     position: relative
     display: flex
+    height: 100%
     align-items: center
 
   .fav
     position: relative
     width: 16px
     height: 16px
     flex-shrink: 0
-    margin: 3px 0 0 4px
+    margin: 0 0 0 6px
     cursor: pointer
     > svg, > img
       position: absolute
@@ -87,7 +89,7 @@
 
   .inline-info
     position: relative
-    margin: 5px 3px 0 5px
+    margin: 0 3px 0 5px
     font-size: rem(12)
     color: var(--frame-fg)
     white-space: nowrap
@@ -98,8 +100,7 @@
   .title
     position: relative
     width: 100%
-    height: 16px
-    margin: 3px 0 0 5px
+    margin: 0 0 0 5px
     font-size: rem(15)
     color: var(--frame-fg)
     white-space: nowrap