Add the image for nextcloudSSO Enterprise Banner and handle small container sizes in which the image should be hidden to avoid that the text overlaps with the image (e.g. when the sidebar is increased heavily)

app/components/enterprise_edition/banner_component.html.erb

@@ -1,98 +1,101 @@
 <%=
   component_wrapper(tag: "turbo-frame") do
-    grid_layout(
-      "op-enterprise-banner",
-      **@system_arguments
-    ) do |grid|
-      if inline?
-        grid.with_area(:visual) do
-          render(Primer::Beta::Octicon.new(icon: :"op-enterprise-addons", classes: "op-enterprise-banner--icon"))
+    render(Primer::BaseComponent.new(tag: :div, classes: "op-enterprise-banner-container")) do
+      grid_layout(
+        "op-enterprise-banner",
+        **@system_arguments
+      ) do |grid|
+        if inline?
+          grid.with_area(:visual) do
+            render(Primer::Beta::Octicon.new(icon: :"op-enterprise-addons", classes: "op-enterprise-banner--icon"))
+          end
         end
-      end
 
-      grid.with_area(:content) do
-        flex_layout do |flex|
-          flex.with_row do
-            if medium? || large?
-              flex_layout(
-                classes: "op-enterprise-banner--title-wrapper",
-                align_items: :center,
-                mb: 3) do |title_flex|
-                title_flex.with_column do
-                  render(
-                    Primer::Beta::Octicon.new(
-                      icon: :"op-enterprise-addons",
-                      size: :medium,
-                      classes: "upsell-colored"
+        grid.with_area(:content) do
+          flex_layout do |flex|
+            flex.with_row do
+              if medium? || large?
+                flex_layout(
+                  classes: "op-enterprise-banner--title-wrapper",
+                  align_items: :center,
+                  mb: 3
+                ) do |title_flex|
+                  title_flex.with_column do
+                    render(
+                      Primer::Beta::Octicon.new(
+                        icon: :"op-enterprise-addons",
+                        size: :medium,
+                        classes: "upsell-colored"
+                      )
                     )
-                  )
-                end
+                  end
 
-                title_flex.with_column(ml: 2) do
-                  render(Primer::Beta::Heading.new(tag: :h2)) { title }
+                  title_flex.with_column(ml: 2) do
+                    render(Primer::Beta::Heading.new(tag: :h2)) { title }
+                  end
                 end
+              else
+                render(Primer::Beta::Text.new(font_weight: :bold)) { title }
               end
-            else
-              render(Primer::Beta::Text.new(font_weight: :bold)) { title }
-            end
-          end
-
-          flex.with_row(classes: "op-enterprise-banner--description") do
-            concat render(Primer::Beta::Text.new(tag: :p)) { description }
-
-            unless large?
-              concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
-            end
-          end
-
-          if features.present?
-            flex.with_row do
-              content_tag(:ul) { safe_join(features.map { |text| render(Primer::Beta::Text.new(tag: :li)) { text } }) }
-            end
-          end
-
-          if large?
-            flex.with_row(my: 2) do
-              video_tag @video,
-                        controls: false,
-                        class: "op-enterprise-banner--video-control",
-                        autoplay: true,
-                        loop: true,
-                        muted: true
             end
 
-            flex.with_row do
-              render(Primer::Beta::Text.new(tag: :p, text_align: :center)) { plan_text }
-            end
-          end
+            flex.with_row(classes: "op-enterprise-banner--description") do
+              concat render(Primer::Beta::Text.new(tag: :p)) { description }
 
-          flex.with_row(mt: 1) do
-            render EnterpriseEdition::UpsellButtonsComponent.new(
-              feature_key,
-              justify_content: (large? ? :center : :flex_start)
-            )
+              unless large?
+                concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
+              end
+            end
+
+            if features.present?
+              flex.with_row do
+                content_tag(:ul) { safe_join(features.map { |text| render(Primer::Beta::Text.new(tag: :li)) { text } }) }
+              end
+            end
+
+            if large?
+              flex.with_row(my: 2) do
+                video_tag @video,
+                          controls: false,
+                          class: "op-enterprise-banner--video-control",
+                          autoplay: true,
+                          loop: true,
+                          muted: true
+              end
+
+              flex.with_row do
+                render(Primer::Beta::Text.new(tag: :p, text_align: :center)) { plan_text }
+              end
+            end
+
+            flex.with_row(mt: 1) do
+              render EnterpriseEdition::UpsellButtonsComponent.new(
+                feature_key,
+                justify_content: (large? ? :center : :flex_start)
+              )
+            end
           end
         end
-      end
 
-      if medium?
-        grid.with_area(:image, **@image_arguments)
-      end
+        if medium?
+          grid.with_area(:image, **@image_arguments)
+        end
 
-      if @dismissable
-        grid.with_area(:dismiss) do
-          classes = medium? ? "op-enterprise-banner--close-icon_hovering" : ""
-          render(
-            Primer::Beta::IconButton.new(
-              classes: class_names("op-enterprise-banner--close-icon", classes),
-              scheme: :invisible,
-              tag: :a,
-              href: dismiss_enterprise_banner_path(feature_key: @dismiss_key),
-              data: { turbo_stream: true, turbo_method: :post },
-              icon: :x,
-              aria: { label: t("ee.upsell.hide_banner") }
+        if @dismissable
+          grid.with_area(:dismiss) do
+            classes = medium? ? "op-enterprise-banner--close-icon_hovering" : ""
+            render(
+              Primer::Beta::IconButton.new(
+                classes: class_names("op-enterprise-banner--close-icon", classes),
+                scheme: :invisible,
+                tag: :a,
+                href: dismiss_enterprise_banner_path(feature_key: @dismiss_key),
+                data: { turbo_stream: true, turbo_method: :post },
+                icon: :x,
+                aria: { label: t("ee.upsell.hide_banner") }
+              )
             )
-          )
+          end
         end
       end
     end

app/components/enterprise_edition/banner_component.sass

@@ -31,6 +31,23 @@
 $op-enterprise-banner-fixed-height-medium: 220px
 $op-enterprise-banner-fixed-height-large: 320px
 
+.op-enterprise-banner-container
+  container-name: banner
+  container-type: inline-size
+
+// Hide the medium banner image when the container is smaller then 1000px
+@container banner (max-width: 1000px)
+  .op-enterprise-banner.op-enterprise-banner_medium
+    grid-template-columns: 1fr
+    height: auto
+
+  .op-enterprise-banner--image
+    background-image: none !important
+
+@container banner (max-width: 1300px)
+  .op-enterprise-banner .op-enterprise-banner--image
+    background-size: cover
+
 .op-enterprise-banner
   display: grid
   grid-auto-flow: column
@@ -50,10 +67,6 @@ $op-enterprise-banner-fixed-height-large: 320px
     grid-template-columns: 2fr 1fr
     height: $op-enterprise-banner-fixed-height-medium
 
-    @media screen and (max-width: $breakpoint-lg)
-      grid-template-columns: 1fr
-      height: auto
-
   &_medium &
     padding: 0
     grid-template-areas: "content graphic"

frontend/src/global_styles/content/_enterprise.sass

@@ -21,6 +21,8 @@
     border: var(--borderWidth-thin) solid var(--borderColor-severe-muted)
     border-radius: var(--borderRadius-medium)
     background: var(--body-background)
+    container-name: upsellContainer
+    container-type: inline-size
 
 .widget-box--blocks--upsell-container
   position: relative
@@ -52,6 +54,16 @@
 .widget-box--blocks--upsell-image
   @include upsell-image
 
+@container upsellContainer (max-width: 1000px)
+  .widget-box--blocks--upsell-container
+    height: auto
+  .widget-box--blocks--upsell-image
+    background-image: none !important
+
+@container upsellContainer (max-width: 1300px)
+  .widget-box--blocks--upsell-image
+    background-size: cover
+
 .widget-box--blocks--upsell-description
   margin: 10px 0 10px 0
   display: flex

frontend/src/global_styles/openproject/_mixins.sass

@@ -357,12 +357,6 @@ $scrollbar-size: 10px
   background-position: center right
   background-size: contain
 
-  @media screen and (max-width: $breakpoint-lg)
-    background-image: none !important
-
-  @media screen and (max-width: $breakpoint-xl)
-    background-size: cover
-
   &:after
     content: ""
     position: absolute

modules/storages/app/components/storages/admin/forms/general_info_form_component.html.erb

@@ -1,6 +1,6 @@
 <%=
-    component_wrapper(tag: 'turbo-frame') do
-      render(Primer::Beta::Text.new(tag: :div, test_selector: 'storage-general-info-form')) do
+    component_wrapper(tag: "turbo-frame") do
+      render(Primer::Beta::Text.new(tag: :div, test_selector: "storage-general-info-form")) do
         primer_form_with(
           model:,
           url: form_url,
@@ -8,9 +8,9 @@
           data: {
             "turbo-frame": "page-content",
             controller: "storages--automatically-managed-project-folders-form",
-            'application-target': "dynamic",
-            'storages--automatically-managed-project-folders-form-provider-type-value': storage.provider_type,
-            'storages--automatically-managed-project-folders-form-is-automatically-managed-value': storage.automatic_management_enabled?,
+            "application-target": "dynamic",
+            "storages--automatically-managed-project-folders-form-provider-type-value": storage.provider_type,
+            "storages--automatically-managed-project-folders-form-is-automatically-managed-value": storage.automatic_management_enabled?
           }
         ) do |form|
           flex_layout do |general_info_row|
@@ -20,7 +20,7 @@
             end
 
             general_info_row.with_row(mb: 3) do
-              render(Primer::Beta::Text.new(test_selector: 'storage-provider-configuration-instructions')) { provider_configuration_instructions }
+              render(Primer::Beta::Text.new(test_selector: "storage-provider-configuration-instructions")) { provider_configuration_instructions }
             end
 
             general_info_row.with_row(mb: 3) do
@@ -37,7 +37,13 @@
               end
 
               general_info_row.with_row(mb: 3) do
-                render(EnterpriseEdition::BannerComponent.new(:nextcloud_sso))
+                render(
+                  EnterpriseEdition::BannerComponent.new(
+                    :nextcloud_sso,
+                    variant: :medium,
+                    image: "enterprise/nextcloud-sso-authentication.png"
+                  )
+                )
               end
             end
 
@@ -64,5 +70,5 @@
           end
         end
       end
-  end
+    end
 %>