[Segment] Attached segments have width greater then 100%

[danriti]

After upgrading to version 2.4.1, one of my coworkers (👋 @lukaszstasiakux) noticed an issue with the ui.attached.segment class. It appeared to be overflowing the space it was previously fitting in. In doing some investigating, I believe there may be a math bug with the following two variables:

https://github.com/Semantic-Org/Semantic-UI/blob/2.4.1/src/themes/default/elements/segment.variables#L105-L106

Which was introduced in the following commit:

c249b6c

If you closely at the changes in the above commit for the segment.variables file, you can see that we were previous using addition with a negative number. However, with the changes that were made, we are now using subtraction a negative number. Whoops.

Steps

1. Open .../examples/attached.html in a browser
2. Inspect the Segment 1 segment

Expected Result

The width and max-width properties should be 98%

Actual Result

The width and max-width properties are 102%

Version

2.4.1

Testcase

https://jsfiddle.net/notfunk/yax4qewz/2/

[danriti]

Proposed solution: #6764