Fix tabs briefly animating too wide after finishing closing some tabs…

… or when multiple tab pages exist

Fix #12566

Since each tab's 'fixed width' was being removed at the same time, each one was measuring the width whilst other tab(s) were / were not reset back to a fluid width, causing measurements to be off.
Flex supports transitions / animations by default, so we do not need to measure the element ourselves in this case, anyway.
Also prevents pinned tabs from fixing tab width and prevents fixing tab width when tab page remains full.

app/renderer/components/tabs/tab.js

@@ -189,9 +189,9 @@ class Tab extends React.Component {
     const frame = this.frame
 
     if (frame && !frame.isEmpty()) {
-      const tabWidth = this.fixTabWidth
       // do not mimic tab size if closed tab is a pinned tab
       if (!this.props.isPinnedTab) {
+        const tabWidth = this.fixTabWidth
         windowActions.onTabClosedWithMouse({
           fixTabWidth: tabWidth
         })
@@ -276,7 +276,7 @@ class Tab extends React.Component {
     props.isPinnedTab = isPinned
     props.isPrivateTab = privateState.isPrivateTab(currentWindow, frameKey)
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frameKey)
-    props.tabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
+    props.tabWidth = isPinned ? null : currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.themeColor = tabUIState.getThemeColor(currentWindow, frameKey)
     props.title = frame.get('title')
     props.tabPageIndex = frameStateUtil.getTabPageIndex(currentWindow)
@@ -295,25 +295,15 @@ class Tab extends React.Component {
     return props
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (this.props.tabWidth && !nextProps.tabWidth) {
-      // remember the width so we can transition from it
-      this.originalWidth = this.elementRef.getBoundingClientRect().width
-    }
-  }
-
   componentDidUpdate (prevProps) {
-    if (prevProps.tabWidth && !this.props.tabWidth) {
-      window.requestAnimationFrame(() => {
-        const newWidth = this.elementRef.getBoundingClientRect().width
-        this.elementRef.animate([
-          { flexBasis: `${this.originalWidth}px`, flexGrow: 0, flexShrink: 0 },
-          { flexBasis: `${newWidth}px`, flexGrow: 0, flexShrink: 0 }
-        ], {
-          duration: 250,
-          iterations: 1,
-          easing: 'ease-in-out'
-        })
+    if (prevProps.tabWidth && !this.props.tabWidth && !this.props.partOfFullPageSet) {
+      this.elementRef.animate([
+          { flexBasis: `${prevProps.tabWidth}px`, flexGrow: 0, flexShrink: 0 },
+          { flexBasis: 0, flexGrow: 1, flexShrink: 1 }
+      ], {
+        duration: 250,
+        iterations: 1,
+        easing: 'ease-in-out'
       })
     }
   }
@@ -414,7 +404,7 @@ const styles = StyleSheet.create({
     verticalAlign: 'top',
     overflow: 'hidden',
     height: '-webkit-fill-available',
-    flex: 1,
+    flex: '1 1 0',
 
     // no-drag is applied to the button and tab area
     // ref: tabs__tabStrip__newTabButton on tabs.js