text overflow fix in macros buttons

src/pug/templates/control-view.pug

@@ -226,7 +226,7 @@ script#control-view-template(type="text/x-template")
 
     .macros-div(class="present")
        button.macros-button(title="Click to run Macros",v-for="(index,macros) in config.macros",
-          @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color }") {{macros.name}}
+          @click="runMacros(index)",:disabled="!is_ready",v-bind:style="{ backgroundColor: macros.color; overflow-wrap: break-word }") {{macros.name}}
 
     .tabs
      

src/pug/templates/macros.pug

@@ -81,7 +81,7 @@ script#macros-template(type="text/x-template")
                         p.title Macros Name
                         .input-container
                                 input.input-color(type="color",id="macros-color",value="#ffffff",@change="editedColor") 
-                                input.input-name(type="text",minlength='1',maxlength='15',id="macros-name" ,v-model="macrosName",@keypress="editedName")
+                                input.input-name(type="text",minlength='1',maxlength='20',id="macros-name" ,v-model="macrosName",@keypress="editedName")
                         p.title Macros G-Code
                         .flex-row-container                      
                                 select(id="gcode-select",title="Select previously uploaded GCode programs.",selected

src/svelte-components/src/lib/StoreHelpers.ts

@@ -6,7 +6,6 @@ export function waitForChange<T>(writable: Writable<T>): Promise<T> {
     let receivedInitial = false;
     let previousValue : any;
     unsubscribe = writable.subscribe(value => {
-      console.log('StoreHelpers',{value:value,receivedInitial:receivedInitial,previousValue:previousValue})
       if (!receivedInitial) {
         receivedInitial = true;
         previousValue = value;