From cdeddbadab176bbd3d9ed63c091d0ff942017070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mariusz=20=C5=9Apiewak?= <dus7@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:15:05 +0100
Subject: [PATCH] Fix BrowsingMenu layout (#3712)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Note: This checklist is a reminder of our shared engineering
expectations. Feel free to change it, although assigning a GitHub
reviewer and the items in bold are required.

⚠️ If you're an external contributor, please file an issue first before
working on a PR, as we can't guarantee that we will accept your changes
if they haven't been discussed ahead of time. Thanks!
-->

Task/Issue URL:
https://app.asana.com/0/414709148257752/1208946169184139/f
Tech Design URL:
CC:

**Description**:

Adjusts layout for `BrowsingMenuButton` so that it expands along with
the label inside. Additionally `BrowsingMenuViewController` got a new
constraint preventing the menu view from going outside view bounds.

**Steps to test this PR**:
1. Enable link conditioner with a bad/slow connection profile.
2. Try to load any site, stop before it finishes loading.
3. Open menu, check if button titles are visible.
4. Load site again (without link conditioner).
5. Check browsing menu sizing and layout is as expected.
6. Go to System Settings -> Developer -> View (simulator) or Display &
Brightness -> Display Zoom (physical device) and set display zoom to
"Larger text".
7. Repeat testing steps.

<!--
Before submitting a PR, please ensure you have tested the combinations
you expect the reviewer to test, then delete configurations you *know*
do not need explicit testing.

Using a simulator where a physical device is unavailable is acceptable.
-->

**Definition of Done (Internal Only)**:

* [ ] Does this PR satisfy our [Definition of
Done](https://app.asana.com/0/1202500774821704/1207634633537039/f)?

**Orientation Testing**:

* [ ] Portrait
* [ ] Landscape

**Device Testing**:

* [x] iPhone SE (1st Gen)
* [x] iPhone 8
* [ ] iPhone X
* [x] iPhone 14 Pro
* [x] iPad

**OS Testing**:

* [ ] iOS 15
* [ ] iOS 16
* [ ] iOS 17

---
###### Internal references:
[Software Engineering
Expectations](https://app.asana.com/0/59792373528535/199064865822552)
[Technical Design
Template](https://app.asana.com/0/59792373528535/184709971311943)
---
 .../BrowsingMenu/BrowsingMenuButton.xib       | 39 ++++++------
 .../BrowsingMenuViewController.storyboard     | 60 +++++++++----------
 ...bViewControllerBrowsingMenuExtension.swift |  5 +-
 3 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/DuckDuckGo/BrowsingMenu/BrowsingMenuButton.xib b/DuckDuckGo/BrowsingMenu/BrowsingMenuButton.xib
index 6936ad96a9..358b28ef66 100644
--- a/DuckDuckGo/BrowsingMenu/BrowsingMenuButton.xib
+++ b/DuckDuckGo/BrowsingMenu/BrowsingMenuButton.xib
@@ -1,39 +1,36 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="23504" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23506"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
-        <view autoresizesSubviews="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iN0-l3-epB" customClass="BrowsingMenuButton" customModule="DuckDuckGo" customModuleProvider="target">
-            <rect key="frame" x="0.0" y="0.0" width="70" height="86"/>
+        <view autoresizesSubviews="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="1000" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="iN0-l3-epB" customClass="BrowsingMenuButton" customModule="DuckDuckGo" customModuleProvider="target">
+            <rect key="frame" x="0.0" y="0.0" width="73" height="85"/>
             <subviews>
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="LOb-q4-bUE">
-                    <rect key="frame" x="3" y="3" width="64" height="80"/>
+                    <rect key="frame" x="3" y="3" width="67" height="79"/>
                     <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                 </view>
                 <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="9Fs-Fi-0RY">
-                    <rect key="frame" x="23" y="19" width="24" height="24"/>
+                    <rect key="frame" x="24.5" y="20" width="24" height="24"/>
                     <constraints>
                         <constraint firstAttribute="width" constant="24" id="E0z-1N-BWl"/>
                         <constraint firstAttribute="height" constant="24" id="hs8-zA-JVo"/>
                     </constraints>
                 </imageView>
-                <label opaque="NO" userInteractionEnabled="NO" contentMode="TopLeft" horizontalHuggingPriority="251" verticalHuggingPriority="251" usesAttributedText="YES" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" minimumFontSize="13" translatesAutoresizingMaskIntoConstraints="NO" id="hw1-7w-6TO">
-                    <rect key="frame" x="6" y="49" width="58" height="14"/>
-                    <constraints>
-                        <constraint firstAttribute="height" relation="lessThanOrEqual" constant="30" id="zpy-Rt-FMO"/>
-                    </constraints>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="TopLeft" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" usesAttributedText="YES" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" minimumScaleFactor="0.90000000000000002" adjustsLetterSpacingToFitWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="hw1-7w-6TO">
+                    <rect key="frame" x="23" y="50" width="27.5" height="15"/>
                     <attributedString key="attributedText">
-                        <fragment content="Label">
+                        <fragment content="Text">
                             <attributes>
-                                <color key="NSColor" name="textColor" catalog="System" colorSpace="catalog"/>
-                                <font key="NSFont" size="14" metaFont="system"/>
+                                <color key="NSColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+                                <font key="NSFont" metaFont="system" size="14"/>
                                 <paragraphStyle key="NSParagraphStyle" alignment="center" lineBreakMode="truncatingTail" baseWritingDirection="natural" tighteningFactorForTruncation="0.0"/>
                             </attributes>
                         </fragment>
@@ -47,15 +44,21 @@
                 <bool key="isElement" value="YES"/>
             </accessibility>
             <constraints>
+                <constraint firstAttribute="bottom" secondItem="LOb-q4-bUE" secondAttribute="bottom" constant="3" id="55D-XN-Ym9"/>
+                <constraint firstItem="LOb-q4-bUE" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="3" id="7HI-5U-WcD"/>
                 <constraint firstAttribute="trailing" secondItem="LOb-q4-bUE" secondAttribute="trailing" constant="3" id="7gg-sa-eLs"/>
-                <constraint firstItem="hw1-7w-6TO" firstAttribute="leading" secondItem="LOb-q4-bUE" secondAttribute="leading" constant="3" id="LEv-qH-9tx"/>
+                <constraint firstItem="LOb-q4-bUE" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="3" id="IHd-KQ-2bw"/>
+                <constraint firstItem="hw1-7w-6TO" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="LOb-q4-bUE" secondAttribute="leading" constant="3" id="LEv-qH-9tx"/>
                 <constraint firstAttribute="bottom" secondItem="LOb-q4-bUE" secondAttribute="bottom" constant="3" id="MDm-Aq-L3X"/>
                 <constraint firstItem="LOb-q4-bUE" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="3" id="NO8-nC-ozd"/>
                 <constraint firstItem="hw1-7w-6TO" firstAttribute="top" secondItem="9Fs-Fi-0RY" secondAttribute="bottom" constant="6" id="QIA-za-5uG"/>
                 <constraint firstItem="9Fs-Fi-0RY" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="SPD-A7-yw9"/>
-                <constraint firstItem="9Fs-Fi-0RY" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" constant="-12" id="XT0-VM-7DB"/>
-                <constraint firstItem="hw1-7w-6TO" firstAttribute="trailing" secondItem="LOb-q4-bUE" secondAttribute="trailing" constant="-3" id="ZWx-kh-tBq"/>
+                <constraint firstAttribute="bottom" secondItem="hw1-7w-6TO" secondAttribute="bottom" constant="20" id="VLe-if-xLk"/>
+                <constraint firstItem="LOb-q4-bUE" firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="hw1-7w-6TO" secondAttribute="trailing" constant="3" id="ZWx-kh-tBq"/>
+                <constraint firstItem="hw1-7w-6TO" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="bnY-r8-Owk"/>
+                <constraint firstAttribute="trailing" secondItem="LOb-q4-bUE" secondAttribute="trailing" constant="3" id="oNy-pg-H00"/>
                 <constraint firstItem="LOb-q4-bUE" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="3" id="ogG-SA-wPN"/>
+                <constraint firstItem="9Fs-Fi-0RY" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="20" id="rJ1-zN-Udy"/>
             </constraints>
             <nil key="simulatedTopBarMetrics"/>
             <nil key="simulatedBottomBarMetrics"/>
@@ -65,7 +68,7 @@
                 <outlet property="image" destination="9Fs-Fi-0RY" id="Fpu-am-HAk"/>
                 <outlet property="label" destination="hw1-7w-6TO" id="2K5-cO-z7K"/>
             </connections>
-            <point key="canvasLocation" x="66.666666666666671" y="75.669642857142847"/>
+            <point key="canvasLocation" x="67.391304347826093" y="73.995535714285708"/>
         </view>
     </objects>
     <resources>
diff --git a/DuckDuckGo/BrowsingMenu/BrowsingMenuViewController.storyboard b/DuckDuckGo/BrowsingMenu/BrowsingMenuViewController.storyboard
index c15ecff942..9b439b5901 100644
--- a/DuckDuckGo/BrowsingMenu/BrowsingMenuViewController.storyboard
+++ b/DuckDuckGo/BrowsingMenu/BrowsingMenuViewController.storyboard
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="guL-1g-W6K">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23504" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="guL-1g-W6K">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22685"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23506"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -12,10 +13,6 @@
         <scene sceneID="2Ec-6C-XHf">
             <objects>
                 <viewController storyboardIdentifier="BrowsingMenuViewController" useStoryboardIdentifierAsRestorationIdentifier="YES" id="guL-1g-W6K" userLabel="BrowsingMenuViewController" customClass="BrowsingMenuViewController" customModule="DuckDuckGo" sceneMemberID="viewController">
-                    <layoutGuides>
-                        <viewControllerLayoutGuide type="top" id="gzK-ia-chJ"/>
-                        <viewControllerLayoutGuide type="bottom" id="4px-c2-WNK"/>
-                    </layoutGuides>
                     <view key="view" clipsSubviews="YES" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="HSy-5d-3QF">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <subviews>
@@ -28,10 +25,10 @@
                                 </connections>
                             </button>
                             <view clearsContextBeforeDrawing="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ssw-57-OlQ">
-                                <rect key="frame" x="95" y="-10" width="280" height="687"/>
+                                <rect key="frame" x="30" y="-10" width="345" height="687"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="HR0-BU-e9e" userLabel="Arrow View">
-                                        <rect key="frame" x="280" y="21" width="15" height="30"/>
+                                        <rect key="frame" x="345" y="21" width="15" height="30"/>
                                         <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                         <constraints>
                                             <constraint firstAttribute="width" constant="15" id="i8W-fd-j15"/>
@@ -39,43 +36,44 @@
                                         </constraints>
                                     </view>
                                     <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="iK5-06-xwx">
-                                        <rect key="frame" x="0.0" y="0.0" width="280" height="687"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="345" height="687"/>
                                         <subviews>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Mqv-D2-X5j" userLabel="Container View">
-                                                <rect key="frame" x="0.0" y="0.0" width="280" height="85"/>
+                                                <rect key="frame" x="0.0" y="0.0" width="345" height="85"/>
                                                 <subviews>
-                                                    <stackView opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="mPw-NF-QvA">
-                                                        <rect key="frame" x="0.0" y="0.0" width="280" height="85"/>
+                                                    <stackView opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" spacing="12" translatesAutoresizingMaskIntoConstraints="NO" id="mPw-NF-QvA">
+                                                        <rect key="frame" x="8" y="0.0" width="329" height="85"/>
                                                     </stackView>
                                                 </subviews>
                                                 <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                                 <constraints>
                                                     <constraint firstItem="mPw-NF-QvA" firstAttribute="top" secondItem="Mqv-D2-X5j" secondAttribute="top" id="7W4-LY-iKr"/>
-                                                    <constraint firstAttribute="trailing" secondItem="mPw-NF-QvA" secondAttribute="trailing" id="913-uj-1kR"/>
-                                                    <constraint firstAttribute="height" constant="85" id="LIL-Vk-q1r"/>
+                                                    <constraint firstAttribute="trailingMargin" secondItem="mPw-NF-QvA" secondAttribute="trailing" id="913-uj-1kR"/>
+                                                    <constraint firstAttribute="height" priority="750" constant="85" id="BaI-hm-vyi"/>
+                                                    <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="85" id="LIL-Vk-q1r"/>
                                                     <constraint firstAttribute="bottom" secondItem="mPw-NF-QvA" secondAttribute="bottom" id="WpZ-s9-r0A"/>
-                                                    <constraint firstItem="mPw-NF-QvA" firstAttribute="leading" secondItem="Mqv-D2-X5j" secondAttribute="leading" id="jPN-Pa-Qtz"/>
+                                                    <constraint firstItem="mPw-NF-QvA" firstAttribute="leading" secondItem="Mqv-D2-X5j" secondAttribute="leadingMargin" id="jPN-Pa-Qtz"/>
                                                 </constraints>
                                             </view>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="QrH-ru-nHf" userLabel="SeparatorView">
-                                                <rect key="frame" x="0.0" y="85" width="280" height="1"/>
+                                                <rect key="frame" x="0.0" y="85" width="345" height="1"/>
                                                 <color key="backgroundColor" red="0.89803921568627454" green="0.89803921568627454" blue="0.89803921568627454" alpha="1" colorSpace="calibratedRGB"/>
                                                 <constraints>
                                                     <constraint firstAttribute="height" constant="1" identifier="separatorHeightConstraint" id="SJH-an-hjh"/>
                                                 </constraints>
                                             </view>
                                             <tableView clipsSubviews="YES" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="none" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="1" sectionFooterHeight="1" contentViewInsetsToSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="p9P-yx-t6g">
-                                                <rect key="frame" x="0.0" y="86" width="280" height="601"/>
+                                                <rect key="frame" x="0.0" y="86" width="345" height="601"/>
                                                 <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                                 <constraints>
                                                     <constraint firstAttribute="height" priority="750" constant="1000" identifier="tableViewHeightContraint" id="8jJ-RX-oOC"/>
                                                 </constraints>
                                                 <prototypes>
                                                     <tableViewCell contentMode="scaleToFill" restorationIdentifier="BrowsingMenuEntryViewCell" insetsLayoutMarginsFromSafeArea="NO" selectionStyle="default" indentationWidth="10" reuseIdentifier="BrowsingMenuEntryViewCell" rowHeight="40" id="nFj-ce-a4n" customClass="BrowsingMenuEntryViewCell" customModule="DuckDuckGo" customModuleProvider="target">
-                                                        <rect key="frame" x="0.0" y="50" width="280" height="40"/>
+                                                        <rect key="frame" x="0.0" y="50" width="345" height="40"/>
                                                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                                         <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="nFj-ce-a4n" id="1Rb-ot-Do2">
-                                                            <rect key="frame" x="0.0" y="0.0" width="280" height="40"/>
+                                                            <rect key="frame" x="0.0" y="0.0" width="345" height="40"/>
                                                             <autoresizingMask key="autoresizingMask"/>
                                                             <subviews>
                                                                 <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="EsL-YQ-qfR">
@@ -87,7 +85,7 @@
                                                                     </constraints>
                                                                 </imageView>
                                                                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" usesAttributedText="YES" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QWh-Jt-sdj">
-                                                                    <rect key="frame" x="57" y="8" width="137.5" height="22"/>
+                                                                    <rect key="frame" x="57" y="8" width="224.5" height="22"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="width" relation="greaterThanOrEqual" constant="10" id="DVA-fU-jie"/>
                                                                         <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="22" id="QmG-YY-EgI"/>
@@ -103,7 +101,7 @@
                                                                     <nil key="highlightedColor"/>
                                                                 </label>
                                                                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="0lX-9U-UGC">
-                                                                    <rect key="frame" x="200.5" y="17" width="8" height="8"/>
+                                                                    <rect key="frame" x="287.5" y="17" width="8" height="8"/>
                                                                     <color key="backgroundColor" red="0.4039215686" green="0.56078431370000004" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="width" constant="8" id="8FF-43-CHT"/>
@@ -133,20 +131,20 @@
                                                         </connections>
                                                     </tableViewCell>
                                                     <tableViewCell contentMode="scaleToFill" restorationIdentifier="BrowsingMenuSeparatorViewCell" insetsLayoutMarginsFromSafeArea="NO" selectionStyle="none" indentationWidth="10" reuseIdentifier="BrowsingMenuSeparatorViewCell" rowHeight="20" id="27a-Wc-CPl" customClass="BrowsingMenuSeparatorViewCell" customModule="DuckDuckGo" customModuleProvider="target">
-                                                        <rect key="frame" x="0.0" y="90" width="280" height="20"/>
+                                                        <rect key="frame" x="0.0" y="90" width="345" height="20"/>
                                                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                                         <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="27a-Wc-CPl" id="8MC-BK-LGd">
-                                                            <rect key="frame" x="0.0" y="0.0" width="280" height="20"/>
+                                                            <rect key="frame" x="0.0" y="0.0" width="345" height="20"/>
                                                             <autoresizingMask key="autoresizingMask"/>
                                                             <subviews>
                                                                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IFl-XA-wM4">
-                                                                    <rect key="frame" x="0.0" y="0.0" width="280" height="20"/>
+                                                                    <rect key="frame" x="0.0" y="0.0" width="345" height="20"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="20" id="0Gq-Ad-vgC"/>
                                                                     </constraints>
                                                                 </view>
                                                                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nus-Ux-2iU">
-                                                                    <rect key="frame" x="24" y="9.5" width="232" height="1"/>
+                                                                    <rect key="frame" x="24" y="9.5" width="297" height="1"/>
                                                                     <color key="backgroundColor" red="0.8980392157" green="0.8980392157" blue="0.8980392157" alpha="1" colorSpace="calibratedRGB"/>
                                                                     <constraints>
                                                                         <constraint firstAttribute="height" constant="1" id="COe-Gi-R66"/>
@@ -196,18 +194,20 @@
                                 </constraints>
                             </view>
                         </subviews>
+                        <viewLayoutGuide key="safeArea" id="HNa-lc-6hJ"/>
                         <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                         <constraints>
                             <constraint firstItem="ssw-57-OlQ" firstAttribute="top" relation="greaterThanOrEqual" secondItem="HSy-5d-3QF" secondAttribute="top" constant="-10" id="1cH-Yn-zF1"/>
-                            <constraint firstAttribute="trailing" secondItem="cLM-7K-NLL" secondAttribute="trailing" id="Irg-qn-OOZ"/>
+                            <constraint firstItem="HNa-lc-6hJ" firstAttribute="trailing" secondItem="cLM-7K-NLL" secondAttribute="trailing" id="Irg-qn-OOZ"/>
                             <constraint firstItem="cLM-7K-NLL" firstAttribute="height" secondItem="HSy-5d-3QF" secondAttribute="height" id="OnL-Gp-loB"/>
                             <constraint firstAttribute="bottom" secondItem="ssw-57-OlQ" secondAttribute="bottom" constant="-10" id="Sqs-BQ-HrD"/>
-                            <constraint firstItem="ssw-57-OlQ" firstAttribute="top" secondItem="gzK-ia-chJ" secondAttribute="bottom" constant="27" id="XLy-dn-BT4" userLabel="Top Constraint iPad"/>
+                            <constraint firstItem="ssw-57-OlQ" firstAttribute="top" secondItem="HNa-lc-6hJ" secondAttribute="top" constant="27" id="XLy-dn-BT4" userLabel="Top Constraint iPad"/>
+                            <constraint firstItem="ssw-57-OlQ" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="HNa-lc-6hJ" secondAttribute="leading" id="ZtV-Ub-MCm"/>
                             <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="ssw-57-OlQ" secondAttribute="bottom" id="aCb-CX-Xic" userLabel="Bottom Constraint iPad"/>
-                            <constraint firstAttribute="trailing" secondItem="ssw-57-OlQ" secondAttribute="trailing" id="e1o-lA-w8S"/>
+                            <constraint firstItem="HNa-lc-6hJ" firstAttribute="trailing" secondItem="ssw-57-OlQ" secondAttribute="trailing" id="e1o-lA-w8S"/>
                             <constraint firstItem="cLM-7K-NLL" firstAttribute="centerY" secondItem="HSy-5d-3QF" secondAttribute="centerY" id="hAN-IU-tgQ"/>
-                            <constraint firstItem="ssw-57-OlQ" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="HSy-5d-3QF" secondAttribute="leading" priority="950" constant="30" id="wT6-gM-s7n"/>
-                            <constraint firstItem="cLM-7K-NLL" firstAttribute="leading" secondItem="HSy-5d-3QF" secondAttribute="leading" id="yw2-aK-Nus"/>
+                            <constraint firstItem="ssw-57-OlQ" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="HNa-lc-6hJ" secondAttribute="leading" priority="950" constant="30" id="wT6-gM-s7n"/>
+                            <constraint firstItem="cLM-7K-NLL" firstAttribute="leading" secondItem="HNa-lc-6hJ" secondAttribute="leading" id="yw2-aK-Nus"/>
                         </constraints>
                         <variation key="default">
                             <mask key="constraints">
diff --git a/DuckDuckGo/TabViewControllerBrowsingMenuExtension.swift b/DuckDuckGo/TabViewControllerBrowsingMenuExtension.swift
index fe6b117e86..4dc0613771 100644
--- a/DuckDuckGo/TabViewControllerBrowsingMenuExtension.swift
+++ b/DuckDuckGo/TabViewControllerBrowsingMenuExtension.swift
@@ -128,7 +128,10 @@ extension TabViewController {
             }))
         }
 
-        entries.append(.separator)
+        // Do not add separator if there are no entries so far
+        if entries.count > 0 {
+            entries.append(.separator)
+        }
 
         let shortcutsEntries = buildShortcutsEntries(includeBookmarks: false)
         entries.append(contentsOf: shortcutsEntries)