FitbitOS rotate clipping issue. `-` indicates directory

app-index.js

import clock from "clock";
import document from "document";
import userSettings from "user-settings"

import * as util from "../common/utils";

clock.granularity = "minutes"; // seconds, minutes, hours

let timeLabel = document.getElementById("timeLabel");
let indicatorSection = document.getElementById("indicatorSection");

clock.ontick = (evt) => {
  let today = new Date();
  
   let date = today.getDate();
   let day = today.toLocaleString().substring(0, 3);
   let month = today.toString().split(' ')[1];
  
   //dateText.text = `${day} ${date} ${month}`;
   //dateBottomText.text = `${day} ${date} ${month}`;
  
  let hours = today.getHours();
  let finalHours = hours;
  let mins = util.zeroPad(today.getMinutes());
  
  // Adjust for 24h and 12h
  // if (userSettings.preferences.clockDisplay == "24h") finalHours = util.zeroPad(hours);
  if (userSettings.preferences.clockDisplay == "12h"  && hours > 12) {
    finalHours-=12;
  }
  if (userSettings.preferences.clockDisplay == "12h"  && hours == 0) finalHours = 12; // Start in 12 and not 0 if 12h
  if (userSettings.preferences.clockDisplay == "12h") {
    if (hours >= 12) {
      indicatorSection.style.display = "inline";
    } else {
      indicatorSection.style.display = "none";
    }
  } else {
    indicatorSection.style.display = "none";
    finalHours = util.zeroPad(finalHours)
  }

  timeLabel.text = `${finalHours}:${mins}`
};

common-utils.js

// Add zero in front of numbers < 10
export function zeroPad(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

resources-index.gui

<!-- Copyright iGerli -->
<svg>
  <g transform="translate(0,70) rotate(-9)">
    <use href="#timeBanner" />
    
  </g>
  
 </svg>

resources-style.css

/* Copyright iGerli-*/
.clockSection {
  width: 120%;
  height: 100;
  x: -10%;
}

resources-widgets.gui

<!-- Copyright iGerli -->
<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <symbol id="timeBanner">
      <svg>
      <gradientRect class="clockSection" 
         gradient-type="linear"
         gradient-x1="0" gradient-y1="0"
         gradient-x2="100%" gradient-y2="0"
         gradient-color1="#F45C43"
         gradient-color2="#EB3349" />
      </svg>
      <text x="47%" y="87" id="timeLabel"
          font-family="Colfax-Black" fill="black"
          font-size="104" font-weight="bold"
          text-anchor="middle" text-length="8" />
      <svg id="indicatorSection" display="none">
        <gradientRect width="20%" height="3" x="80%" y="105"
           gradient-type="linear"
           gradient-x1="0" gradient-y1="0"
           gradient-x2="100%" gradient-y2="0"
           gradient-color1="#F45C43"
           gradient-color2="#EB3349" />
      </svg>
    </symbol>
  </defs>
</svg>