Remove surrounding space from ion-tab-button

Issue

I have the following layout for ion-tabs:

  <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()" >
    <ion-tab-bar slot="bottom">
      <ion-tab-button routerDirection='root' *ngFor="let tab of tabList" [tab]="tab.root" class="actual-tab">
        <ion-grid>
          <ion-row>
            <ion-col size="10">
              <ion-thumbnail id="thumbnail_viewer{{tab.root}}"></ion-thumbnail>
            </ion-col>
            <ion-col size="2" class="ion-align-self-start ion-justify-content-end">
              <ion-icon class="close" name="close" (click)=closeTab(tab.root) title="Close tab" [style.visibility]="tab.root === 'tab1' ? 'hidden' : 'visible'"></ion-icon>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="10">
                <ion-label>{{tab.title}}</ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-tab-button>
      <ion-tab-button (click)="addTab(false)">
        <ion-icon name="add-circle"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

I want my the ion-grid contained within my ion-tab-button to take up the full width of the tab button i.e. I want the red space to extend to the same size as the white space in the screenshot below:

I've been able to find that if I change the flex-direction from column to row in the developer tools at the grid level it gives me the result I want. But I cannot work out how to do that in css or even an inline style. I've spent way to long trying many things from the ionic documentation. Can someone point me in the right direction?

Solution

Found a solution in the end. All that I needed was:

ion-tab-button {​
    flex-direction: row;
}

Answered By - daveywc