[BUGFIX] search button / box responsive issues.

[pxamike]

• search-button in main-navigation is hidden under search-box when language-menu-box is enabled.
• search-box in header-middle doesn't fit when social-icons are enabled.

Some t3kit components in main-navigation or header-middle work fine by themselves but not in combination with others. This pull request tries to solve search-box related issues above. It also changes header-middle__logo and header-middle__social-icon to width: auto; in 768px screens or larger (or logo + searchbox + social icons will simply not fit).

Testing:

I have tried to test as much as I can to not break other things / other views, but I need a second opinion whether this is deemed [!!!] or not. The following images are showing before, after, before, after my pull request is applied.

Testcase 1:
Shows the issue where search-button in main-navigation is hidden under search-box when language-menu-box is enabled. (see Desktop 2-image)

Typoscript constants:
themes.configuration.isDevelopment = 1
themes.configuration.menu.main.enableLangMenuInNavigation = 1
themes.configuration.elem.status.showHeaderTopSearch = 1
themes.configuration.elem.status.showHeaderTopLangMenu = 1
themes.configuration.elem.status.showHeaderMainMenuSearch = 1
themes.configuration.elem.status.showHeaderTopLangLabel = 1
themes.configuration.elem.status.headerTopNavigationVisibleInMobileMenu = 1

themes.configuration.elem.status.showHeaderMiddleSearch = 0
themes.configuration.elem.status.showHeaderMiddleSocIcons = 0

themes.configuration.socialmedia.useGooglePlus = 0
themes.configuration.socialmedia.useMynewsdesk = 0
themes.configuration.socialmedia.usePinterest = 0
themes.configuration.socialmedia.useTwitter = 1
themes.configuration.socialmedia.useVimeo = 0
themes.configuration.socialmedia.useXing = 0
themes.configuration.socialmedia.useYoutube = 1

Desktop 1

Desktop 2

iPad 1

iPad 2

iPad 3

Testcase 2:
Shows the issue that search-box in header-middle doesn't fit when social-icons are enabled.

Typoscript constants:
themes.configuration.isDevelopment = 1
themes.configuration.menu.main.enableLangMenuInNavigation = 1
themes.configuration.elem.status.showHeaderTopSearch = 1
themes.configuration.elem.status.showHeaderTopLangMenu = 1
themes.configuration.elem.status.showHeaderMainMenuSearch = 1
themes.configuration.elem.status.showHeaderTopLangLabel = 1
themes.configuration.elem.status.headerTopNavigationVisibleInMobileMenu = 1

themes.configuration.elem.status.showHeaderMiddleSearch = 1
themes.configuration.elem.status.showHeaderMiddleSocIcons = 1

themes.configuration.socialmedia.useGooglePlus = 0
themes.configuration.socialmedia.useMynewsdesk = 0
themes.configuration.socialmedia.usePinterest = 0
themes.configuration.socialmedia.useTwitter = 1
themes.configuration.socialmedia.useVimeo = 0
themes.configuration.socialmedia.useXing = 0
themes.configuration.socialmedia.useYoutube = 1

Desktop 1

Desktop 2

iPad 1

iPad 2

iPad 3