1 files changed, 54 insertions, 12 deletions

diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css
index b7e961846d..6777e37cc3 100644
--- a/browser/themes/shared/translations/panel.css
+++ b/browser/themes/shared/translations/panel.css
@@ -7,7 +7,7 @@
   width: 31em;
 }
 
-:where(#translations-panel) :is(description, label, menulist) {
+:where(#full-page-translations-panel) :is(description, label, menulist) {
   margin: 0;
 }
 
@@ -42,11 +42,12 @@ h1.translations-panel-header-wrapper {
   }
 }
 
-#translations-panel-intro {
+#full-page-translations-panel-intro {
   line-height: 1.6;
+  margin-block-end: var(--arrowpanel-padding);
 }
 
-#translations-panel-settings > image {
+.translations-panel-settings-gear-icon > image {
   /* Override the panel-info-button with a gear icon. */
   list-style-image: url(chrome://global/skin/icons/settings.svg);
 }
@@ -54,10 +55,9 @@ h1.translations-panel-header-wrapper {
 .translations-panel-content {
   padding: var(--arrowpanel-padding);
   padding-block-end: 8px;
-  gap: var(--arrowpanel-padding);
 }
 
-#translations-panel-lang-selection > label {
+#full-page-translations-panel-lang-selection > label {
   margin-block: var(--arrowpanel-padding) 6px;
 }
 
@@ -68,7 +68,7 @@ h1.translations-panel-header-wrapper {
   background-color: var(--button-primary-bgcolor);
 }
 
-#translations-panel-translate-hint-action {
+#full-page-translations-panel-translate-hint-action {
   appearance: none;
   background-color: var(--button-bgcolor);
   border-radius: 4px;
@@ -77,25 +77,25 @@ h1.translations-panel-header-wrapper {
   font-size: 0.9em;
 }
 
-#translations-panel-translate-hint-action:hover {
+#full-page-translations-panel-translate-hint-action:hover {
   background-color: var(--button-hover-bgcolor);
 }
 
-#translations-panel-translate-hint-action:hover:active {
+#full-page-translations-panel-translate-hint-action:hover:active {
   background-color: var(--button-active-bgcolor);
 }
 
-#translations-panel-translate-hint-action:focus-visible {
+#full-page-translations-panel-translate-hint-action:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
 
-#translations-panel-error-message-hint {
+#full-page-translations-panel-error-message-hint {
   margin-inline-start: 21px;
   margin-block: 8px;
 }
 
-#translations-panel-error-message {
+#full-page-translations-panel-error-message {
   font-weight: 600;
 }
 
@@ -111,8 +111,50 @@ h1.translations-panel-header-wrapper {
   align-items: start;
 }
 
-#translations-panel-error {
+#full-page-translations-panel-error {
   border: 1px solid currentColor;
   border-radius: 4px;
   padding: 12px;
 }
+
+.select-translations-panel-button {
+  align-items: center;
+  justify-content: center;
+  margin-inline: 0;
+}
+
+.select-translations-panel-content {
+  padding: var(--arrowpanel-padding);
+  padding-block: 4px;
+}
+
+.select-translations-panel-copy-button {
+  background-color: transparent;
+  font: message-box;
+  font-weight: var(--font-weight-bold);
+  &::before {
+    content: url(chrome://global/skin/icons/edit-copy.svg);
+    fill: currentColor;
+    margin-inline-end: 5px;
+    -moz-context-properties: fill;
+  }
+}
+
+.select-translations-panel-header {
+  padding: var(--arrowpanel-padding);
+  text-align: initial;
+}
+
+.select-translations-panel-label {
+  margin-inline: 2px;
+}
+
+#select-translations-panel-lang-selection {
+  gap: 6px;
+}
+
+#select-translations-panel-translation-area {
+  height: 8em;
+  margin-inline: 5px;
+  resize: none;
+}