v3 Truncate long enity name (#87)

esphome · Apr 23, 2024 · 82ce7fc · 82ce7fc
1 parent 604bb8f
commit 82ce7fc
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/v3/src/css/app.ts b/packages/v3/src/css/app.ts
@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   .flex-grid-half {
     display: grid;
-    grid-template-columns: 500px 2fr;
+    grid-template-columns: 600px 2fr;
   }
   .flex-grid-half.expanded_entity,
   .flex-grid-half.expanded_logs {

diff --git a/packages/v3/src/css/esp-entity-table.ts b/packages/v3/src/css/esp-entity-table.ts
@@ -46,14 +46,18 @@ export default css`
     text-align: center;
   }
   .entity-row > :nth-child(2) {
-    flex: 1 1 50%;
+    flex: 1 1 40%;
     margin-left: 16px;
     margin-right: 8px;
     text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 150px;
   }
   .entity-row > :nth-child(3) {
     flex: 1 1 50%;
     margin-right: 8px;
+    margin-left: 20px;
     text-align: right;
     display: flex;
     justify-content: space-between;

diff --git a/packages/v3/src/esp-range-slider.ts b/packages/v3/src/esp-range-slider.ts
@@ -161,7 +161,7 @@ export class EspRangeSlider extends LitElement {
   render() {
     return html`
       <div class="range-wrap">
-        <label style="text-aligne: left;">${this.min || 0}</label>
+        <label>${this.min || 0}</label>
         <div class="slider-wrap">
           <div class="range-value" id="rangeValue"></div>
             <input
@@ -221,11 +221,8 @@ export class EspRangeSlider extends LitElement {
           display: flex;
           align-items: center;
         }
-        .range-wrap label{
-          flex: 1;
-        }
         .slider-wrap{
-          width: 70%; 
+          flex-grow: 1;
           margin: 0px 15px;
           position: relative;
         }