title: ion-note inside of ion-list cuts off primary text
body: <p>I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;ion-list *ngIf="events.length !== 0"&gt;
      &lt;ion-item-group&gt;
        &lt;ion-item-divider&gt;
          Upcoming events
        &lt;/ion-item-divider&gt;
        &lt;button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)"&gt;
          {{event.name}}
          &lt;ion-note item-right&gt;{{event.start | date: 'HH:mm'}}&lt;/ion-note&gt;
        &lt;/button&gt;
  
      &lt;/ion-item-group&gt;
    &lt;/ion-list&gt;
  </code></pre>
  
  <p>If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:</p>
  
  <p><a href="https://i.stack.imgur.com/ES2gB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ES2gB.png" alt="ionic cuts off the primary text"></a></p>
  
  <p>I have checked the documentation on ionic's website, and I copied over the demo source from here: <a href="https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html" rel="nofollow noreferrer">https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html</a></p>
  
  <p>Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.</p>
  
  <p>The question is: how do I make ionic not cut off the primary text in my list?</p>
  
  <p>Thanks.</p>
  
  <p>**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.</p>